Reactjs 在 React 中渲染 array.map()

发布于07月09日

我遇到了一个问题，我试图使用数据数组来渲染<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'));

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

推荐答案

Gosha Arinich是对的，你应该返回<li>元素.

数组或迭代器中的每个子级都应该有一个唯一的"键"属性.

因此，您需要在列表中添加"密钥":

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

或者放下console.log()，用es6 arrow functions做一个漂亮的单线图:

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

IMPORTANT UPDATE:

上面的答案解决了当前的问题，但正如 comments 中提到的Sergey:如果你想做一些过滤和排序，根据 map 索引使用的键是BAD.在这种情况下，使用已经存在的item.id if id，或者只为其生成唯一ID.

Reactjs相关问答推荐

在Redux工具包查询中，是否可以将标记应用到API切片内的所有端点？

Reactjs 在 React 中渲染 array.map()

推荐答案

Reactjs相关问答推荐

在Redux工具包查询中，是否可以将标记应用到API切片内的所有端点？

有没有办法将MUI网格元素与Flex-Start对齐？

GoLang有条件地为.js.gz提供服务(如果它存在)，否则为.js

获取更改后的状态值

为什么我得不到我想要的数据？

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

在react上隐藏源映射

Next.js `getLayout` 函数没有被调用

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

画布：用鼠标绘制形状时重新绘制整个画布会导致卡顿

Next.js 和理智｜ npm run build 时预渲染页面/时发生错误

使用jest如何覆盖对象的模拟？我正在使用`jest.mock()`来模拟对象，并希望 for each 测试用例覆盖模拟.

使用带有搜索字符串的全局过滤器时如何在 React-Table 中进行精确匹配？

如果传递给挂钩的数据需要事先修改，如何使用自定义挂钩？

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度？

如何禁用来自 React Native API 的某些特定项目的可touch 不透明度

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

在react 钩子中将数组添加到数组状态给出一个数字

如何跟踪 dexie UseLiveQuery 是否完成

将 C# Razor 条件块转换为 React.js 代码