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

Question

真是难住了。我试图为对象数组中每个值的每个键创建一个 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>
);

任何见解都会有所帮助。

Answer 1

这是因为您在外循环中使用了 forEach 并且它实际上没有返回任何内容，因此 List 的 children 属性code> 是未定义。试试这个:

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