在 React 中渲染 array.map()

Question

我在尝试使用数据数组呈现 <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 许可协议

Answer 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 许可协议