我有一个简单的组件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>退房的阵营文档 - 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。您需要为地图功能中呈现的每个项目设置唯一的键。这种反应可以区分它们。
谢谢你赢。这很漂亮。你可以请更新答案，并告诉我，而不是提供的数组，它是有问题的JSON对象。也在一个单独的组件。示例在我的问题上面。我是否也需要将其导出或需要足够的空间。 –
@ Igor-Vuk更新了我的回答。 – Win