我有以下列表:
const list = [
{
id: '1',
task: 'task 1',
activities: [{
'swimming': false,
'tennis': false,
'football': false,
'basketball': false
}],
allCompleted: false
},
{
id: '2',
task: 'task 2',
activities: [{
'soccer': false,
'rugby': false,
'golf': false,
'baseball': false
}],
allCompleted: false
},
{
id: '3',
task: 'task 3',
activities: [{
'hockey': false,
'netball': false,
'softball': false,
'surfing': false
}],
allCompleted: false
}
];
但是,当我使用时:
<ul>
{list.map(item => (
<li key={item.id}>
{item.task}
<ul>
<li>{item.activities}</li>
</ul>
</li>
))}
</ul>
我收到对象作为 React 子项无效
错误。
我正在尝试遍历列表以显示任务名称以及与之相关的任何事件:
-
任务1
- 游泳
- 网球
- 足球
- 篮球
-
任务2
- 足球
- 橄榄球
- 高尔夫
- 棒球
-
任务3
- 曲棍球
- 无挡板篮球
- 垒球
- 冲浪
如何产生上面的输出?
稍后当用户选择列表中的项目时,我将在每个事件上使用 false/true
值。
最佳答案
您会收到错误,因为 item.activities 是一个对象数组,您无法直接渲染对象。
相反,您需要循环对象键
<ul>
{list.map(item => (
<li key={item.id}>
{item.task}
<ul>
{Object.keys(item.activities[0]).map(act => <li>{act}</li>)}
</ul>
</li>
))}
</ul>
关于javascript - 迭代动态的嵌套对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58235560/