React JS中如何在HTML中遍历对象并渲染？Dashboard组件渲染失败求助

你用forEach遍历的方式没法渲染元素，核心原因是**forEach没有返回值**——它只是循环执行回调里的逻辑，最后返回undefined，React拿不到要渲染的元素数组，自然不会显示内容。

另外还有个小问题：你用users[index].name取值是错的，index是Object.keys(users)这个数组的索引，和对象的键没有对应关系，比如对象键是字符串的话，users[index]根本取不到正确的用户数据，应该用users[key]来访问对应键的用户对象。

把forEach换成map，map会遍历数组并返回一个新的元素数组，React可以直接渲染这个数组。修正后的代码如下：

const Dashboard = (props) => { 
    // users object is fetched

    return (
        <ul>
            {
                Object.keys(users).map((key) => {
                    console.log("iterating------>" + users[key].name);
                    return <li key={key}>{users[key].name}</li>
                })
            }
        </ul>
    )
}

• React渲染列表时必须给每个列表项加唯一key，你用对象的键作为key是合理的，因为对象键本身就是唯一的。
• 如果你的users其实是数组（不是对象），直接用数组的map方法更简洁：

  users.map((user) => (
      <li key={user.id}>{user.name}</li>
  ))
  

（优先用用户的唯一ID当key，别用数组索引，避免列表更新时出现渲染异常）

内容的提问来源于stack exchange，提问作者Music