Question

我有一个简单的组件Movies.jsx和movieList.jsx中的对象数组我正在导出这个数组并将Movies.jsx中的状态设置为等于该数组。当我在控制台中查看时，我发现它已经传递到状态ok。

我想遍历那个对象数组并渲染它：我该怎么做？无论我尝试什么，我都会收到错误“对象无效作为React孩子”

在我把它变成数组之前，它是一个json对象，但我也没看过它。

我也收到一个错误，“数组或迭代器中的每个子节点都应该有一个唯一的'key'prop”

示例2：如果不是数组，它将是JSON对象。我们还需要从单独的组件中导出它然后需要吗？我们将如何迭代它？

Answer 1

以下是您尝试实现的快速示例。由于您提供了屏幕截图，我必须提供make-shift数据。

＆＃13;

var Movies = {
    "data": [{
      "id": 1,
      "name": "Forest Gump",
      "rating": 5
    }, {
      "id": 2,
      "name": "Lion",
      "rating": 5
    }]
 };

var Movie = React.createClass({
  render: function() {
    return (
       <div>
          <div>Name: {this.props.item.name}</div>
          <div>Rating: {this.props.item.rating}</div>
       </div>
    );
  }
});

var MovieContainer = React.createClass({
  getInitialState() {
    return { 
      movies: null
    };
  },
  componentWillMount: function() {
    this.setState({
      movies: Movies.data
    })
  },
  render: function() {
    return (
      <div>
      { this.state.movies.map(function(item) {
          return (
            <Movie key={item.id} item={ item } />
          )
      }) }
      </div>
    );
  }
});
 
ReactDOM.render(
  <MovieContainer />, 
  document.getElementById('container'));

＆＃13;

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

＆＃13;

Answer 2

查看React文档 - https://facebook.github.io/react/docs/lists-and-keys.html#keys和https://facebook.github.io/react/docs/lists-and-keys.html#embedding-map-in-jsx。您需要为地图功能中呈现的每个项目设置唯一键。这种反应可以区分它们。

迭代数组并渲染

2 个答案: