时间戳

首页 > 解决方案 > 嵌套循环返回 Reactjs 中的简单 ListItem - -Object.values 和 Object.keys

javascript - 嵌套循环返回 Reactjs 中的简单 ListItem - -Object.values 和 Object.keys

问题描述

真是难住了。我正在尝试为ListItem对象数组中每个值的每个键创建一个。当我登录item时，它会以字符串形式返回我要查找的密钥。伟大的！但是，列表项永远不会呈现在页面上。

return (
 <div>
  <List className="list">
   {Object.values(props.sectionInfo).forEach(section => {
   Object.keys(section).map((item, index) => {
    return (
     <ListItem button className='list-item'> //doesn't render, but also doesn't throw errors
      <ListItemText primary={item} />
     </ListItem>
     )
   });
  })}
  </List>
 </div>
);

console.log(item) //returns "red", "blue"

下面完美地呈现了列表，但是列表项是索引 (0, 1)

return (
 <div>
  <List className="list">
   {Object.keys(props.sectionInfo).map((section, index) => {
    return (
     <ListItem button className='list-item'>
      <ListItemText primary={section} />
     </ListItem>
    )
   })}
  </List>
 </div>
);

任何见解都会有所帮助。

标签： javascriptarraysloopsobjectarray.prototype.map

解决方案

这是因为你forEach在外循环中使用了，它实际上并没有返回任何东西，所以childrenprop 的Listis undefined。试试这个：

return (
 <div>
  <List className="list">
   {Object.values(props.sectionInfo).map(section => {
   return Object.keys(section).map((item, index) => {
    return (
     <ListItem button className='list-item'>
      <ListItemText primary={item} />
     </ListItem>
     )
   });
  })}
  </List>
 </div>
);

推荐阅读