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

我究竟做错了什么？请随意指出任何不是最佳做法.谢谢.

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 箭头功能放下并做一个漂亮的oneliner :

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

重要更新:

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

Answer 2

let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });

Answer 3

你不回来了。改成

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

Answer 4

使用无状态功能组件 我们不会使用 this.state。像这样

 {data1.map((item,key)=>
               { return
                <tr key={key}>
                <td>{item.heading}</td>
                <td>{item.date}</td>
                <td>{item.status}</td>
              </tr>
                
                })}