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>

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

我正在尝试遍历列表以显示任务名称及其伴随的任何活动：

任务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>

遍历动态的嵌套对象

1 个答案: