javascript - 在 React 中渲染 array.map()

Question

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

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

Answer 1

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。