迭代通过数组和渲染

问题描述：

我有一个简单的组件Movies.jsx和movieList.jsx内的对象数组我导出这个数组并设置Movies.jsx内的状态等于该数组。当我看着控制台时，我发现它已经传递到状态正常。迭代通过数组和渲染

我想遍历该对象数组并渲染它：我该怎么做？无论我尝试我得到一个错误“对象不是有效的作为一个React的孩子”

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

我也得到一个错误，“在一个数组或迭代每个孩子都应该有一个独特的‘钥匙’托”

例2：它怎么会是如果不是数组，它是JSON对象。我们是否也需要将它从单独的组件导出然后需要？我们将如何迭代它？

答

下面是您试图实现的一个简单示例。既然你提供了截图，我不得不提供转换数据。

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'));

<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>

谢谢你赢。这很漂亮。你可以请更新答案，并告诉我，而不是提供的数组，它是有问题的JSON对象。也在一个单独的组件。示例在我的问题上面。我是否也需要将其导出或需要足够的空间。 –

@ Igor-Vuk更新了我的回答。 – Win

答

退房的阵营文档 - 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。您需要为地图功能中呈现的每个项目设置唯一的键。这种反应可以区分它们。

迭代通过数组和渲染

相关推荐