在 React 中渲染 array.map()

新手上路,请多包涵

我在尝试使用数据数组呈现 <ul> 元素时遇到问题。在下面的代码中 console.log 工作正常,但列表项没有出现。

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

我究竟做错了什么?请随时指出任何不是最佳实践的地方。

原文由 user6542445 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 450
1 个回答

Gosha Arinich 是对的,你应该返回你的 <li> 元素。但是,在这种情况下,您应该在浏览器控制台中收到讨厌的红色警告

数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。

因此,您需要将“密钥”添加到您的列表中:

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

或删除 console.log() 并使用 es6 箭头函数 做一个漂亮的单线:

this.state.data.map((item,i) => <li key={i}>Test</li>)

重要更新

上面的答案是解决当前的问题,但正如 Sergey 在评论中提到的那样:如果你想做一些过滤和排序,使用取决于地图索引的键是 不好 的。在这种情况下,使用 item.id 如果 id 已经存在,或者只为它生成唯一的 ID。

原文由 Dmitry Birin 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题