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，而实际上并没有返回任何内容，因此children的{{1}}属性是List。试试这个：

undefined

Answer 2

请尝试按以下方式构建虚拟域的列表：

let items = []
Object.values(props.sectionInfo).forEach(section => {
   let subItems = 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>
     )
   });

   items = items.concat(subItems);
  })

return (
 <div>
  <List className="list">
   {items}
  </List>
 </div>
);

Answer 3

您是否尝试过第二个循环中的Object.values(section)？

由于第二条语句似乎将内容索引为数组。也许您可以提供有关数据结构的更多信息，以进一步帮助您。

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

3 个答案: