我在尝试使用数据数组来渲染 <ul>
时遇到问题。元素。在下面的代码中,控制台日志工作正常,但列表项没有出现。
var Main = React.createClass({
getInitialState: function(){
return {
data: dataRecent
}
},
render: function(){
return (
<div>
<ul>
{
this.state.data.map(function(item, i){
console.log('test');
<li>Test</li>
})
}
</ul>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById('app'));
我做错了什么?请随时指出任何不是最佳实践的地方。
最佳答案
Gosha Arinich 是对的,您应该返回 <li>
元素。
但是,尽管如此,在这种情况下,您应该在浏览器控制台中收到令人讨厌的红色警告
Each child in an array or iterator should have a unique "key" prop.
所以,您需要将“key”添加到您的列表中:
this.state.data.map(function(item, i){
console.log('test');
return <li key={i}>Test</li>
})
或者删除 console.log()
并使用 es6 arrow functions 做一个漂亮的 oneliner :
this.state.data.map((item,i) => <li key={i}>Test</li>)
重要更新:
上面的答案是解决当前问题,但是正如Sergey在评论中提到的:如果你想做一些过滤和排序,则使用依赖于 map 索引的键是BAD。在这种情况下,如果 item.id
已经存在,请使用 id
,或者只是为其生成唯一的 id。
关于javascript - 在 React 中渲染 array.map(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38282997/