遍历动态的嵌套对象答案

【问题标题】：Iterate through nested object that are dynamic遍历动态的嵌套对象
【发布时间】：2019-10-04 11:29:27
【问题描述】：

我有以下清单：

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>

我收到 Objects are not valid as a React child 错误。

我正在尝试遍历列表以显示任务名称和与之相关的任何活动：

任务1
- 游泳
- 网球
- 足球
- 篮球
任务 2
- 足球
- 橄榄球
- 高尔夫
- 棒球
任务 3
- 曲棍球
- 投球
- 垒球
- 冲浪

我怎样才能产生上面的输出？

稍后当用户在列表中选择一个项目时，我将在每个活动上使用false/true 值。

【问题讨论】：

可以分享你尝试实现For循环的代码吗？
问题已更新@Shuvo

标签： javascript arrays reactjs object

【解决方案1】：

您会收到错误，因为 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>

【讨论】：