javascript - 迭代动态的嵌套对象

Question

我有以下列表:

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 值。

Answer 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>