Javascript 如何通过每个对象元素迭代对象数组？

我试图迭代一个对象数组，以显示表中的每个对象元素

这就是我的阵列：

     list: [
                {header: ['id', 'name', 'date', 'verified']},
                {body: [1, 'abc', '26-10-2019', true]}
            ]

我想在垂直位置渲染一个表，如下所示：

这就是我试图做到的：

const render = list.map((result, idx) => (
            <tr key={idx}>
                <td>{result.header}</td>                
                <td>{result.body}</td>                
            </tr>
        ))

但结果是

<tr>
   <td>id name date verified</td>
</tr>
<tr>
   <td>1 abc 26-10-2019 true</td>
</tr>

尝试：

---

你需要重复整张桌子，就像这样

const render = list[0].header.map((name, i) => <tr key={i}>
                <td>{name}</td>
                <td>{String(list[1].body[i])}</td>
            </tr>)

---

您还需要循环result.header和result.body，列表数组的长度是多少？这样做真的很不实际。@k.s.这是一个2的数组objects@mr.abdo它是否总是一个包含两个对象的数组？我未捕获TypeError:无法读取undefinedwhy的属性“0”？您在这里使用toString是为了确保整数、数组等都转换为StringTk以获得帮助。我在Uncaught TypeError中遇到此错误：无法读取undefined的属性“map”，但我正在尝试解决此问题。可能初始加载中未定义list变量，或者将有一个元素不包含header property这是我的错误。我修复了它，并得到了此错误Uncaught TypeError:无法读取未定义的属性“0”。我已在更新了您的小提琴，并更新了我的答案

const render = list[0].header.map((name, i) => <tr key={i}>
                <td>{name}</td>
                <td>{String(list[1].body[i])}</td>
            </tr>)