React 不变违规：对象作为 React 子项无效

Question

Uncaught (in promise) Error: Objects are not valid as a React child.

labelList 是一个对象数组。我在下面添加了一些示例数据。我试图映射这些对象，以便我可以生成每个对象数据的单独行。我尝试做很多事情，例如 Object.keys(labelItem).map ...但错误仍未解决。

<tbody>
  {
    this.state.labelList.map((labelItem,index)=>{
      return (
        <tr key={ index }>
          <td>{labelItem.label}</td>
        </tr>
        )
    })
  }
</tbody>

数据：

labelList: [
  {
    "label": "Title",
    "translation": "Titre"
  },
  {
    "label": "First Name",
    "translation": "Prenom"
  },
  {
    "label": "Last Name",
    "translation": "Nom"
  },
  {
    "label": "Marital Status",
    "translation": "Etat civil"
  },
  {
    "label": "SSN",
    "translation": ""
  },
  {
    "label": "Birth Date",
    "translation": "Date De Naissance"
  }
]

Answer 1

您的代码有效，如下面的 JS fiddle 所示。先检查一下this.state.labelList的值，可能不是你想的那样。

var labelList = [
  {
    "label": "Title",
    "translation": "Titre"
  },
  {
    "label": "First Name",
    "translation": "Prenom"
  },
  {
    "label": "Last Name",
    "translation": "Nom"
  },
  {
    "label": "Marital Status",
    "translation": "Etat civil"
  },
  {
    "label": "SSN",
    "translation": ""
  },
  {
    "label": "Birth Date",
    "translation": "Date De Naissance"
  }
]

var Hello = React.createClass({
  render: function() {
    return <tbody>
        {
          labelList.map((labelItem,index)=>{
            return (
              <tr key={ index }>
                <td>{labelItem.label}</td>
              </tr>
              )
          })
        }
      </tbody>
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

React 不变违规：对象作为 React 子项无效

React Invariant Violation: Objects are not valid as a React child

javascript

jsx

reactjs