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

【问题标题】：Nested loop to return simple ListItem in Reactjs - -Object.values and Object.keys嵌套循环以在 Reactjs 中返回简单的 ListItem - -Object.values 和 Object.keys
【发布时间】：2020-02-21 23:33:47
【问题描述】：

真的很难过。我正在尝试为对象数组中每个值的每个键创建一个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>
);

任何见解都会有所帮助。

【问题讨论】：

标签： javascript arrays loops object array.prototype.map

【解决方案1】：

这是因为你在外循环中使用了forEach，它实际上并没有返回任何东西，所以List 的children 属性是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>
);

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

请尝试如下构建虚拟dom列表：

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

【讨论】：