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

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道具是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>
);

Answer 2

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

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

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