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

Question

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

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

请尝试按如下方式构建虚拟 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>
);

Answer 2

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

因为从你的第二个陈述来看，内容似乎被索引为一个数组。也许你可以提供更多关于数据结构的信息来帮助你。

Answer 3

这是因为你在外循环中使用了 forEach 而它实际上没有 return 任何东西，所以 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>
);

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

Nested loop to return simple ListItem in Reactjs - -Object.values and Object.keys

javascript

arrays

loops

object

array.prototype.map