在React中渲染array.map（）

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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在评论中提到的那样：如果要进行一些过滤和排序，则根据地图索引使用键是

。在这种情况下，请使用item.idif（如果id已存在），或仅为其生成唯一的ID。

以上是 在React中渲染array.map（） 的全部内容， 来源链接： utcz.com/qa/420393.html

回到顶部