在React中渲染array.map（）

小编典典

在React中渲染array.map（）

reactjs

我在尝试使用数据数组呈现<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'));

我究竟做错了什么？请随时指出并非最佳做法的任何内容。

阅读 694

2020-07-22

共1个答案

小编典典

GoshaArinich是正确的，您应该返回您的<li>元素。但是，在这种情况下，您应该在浏览器控制台中收到讨厌的红色警告

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

因此，您需要在列表中添加“键”：

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

或console.log()使用es6
箭头功能放下并做一个漂亮的oneliner
：

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

重要更新 ：

上面的答案正在解决当前的问题，但是正如Sergey在评论中提到的那样：如果要进行一些过滤和排序，则根据地图索引使用键是
BAD 。在这种情况下，请使用item.idif（如果id已存在），或仅为其生成唯一的ID。

2020-07-22