如何使用React.js将两个对象数组数据渲染为指定格式的表格

• 表格结构错误：<tbody> 下直接包裹了多余的 <tr> 标签，且遍历 fetch1 时又生成了嵌套的 <tr>，不符合HTML表格的嵌套规则（正确结构应为 tbody > tr > td）
• 遍历逻辑错误：分开遍历两个数组无法将同索引下的 A 属性和 B 属性对应到同一行，最终渲染的表格结构完全错位

默认两个数组长度一致的场景，代码如下：

<ModalBody>
  <Table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      {fetch1.map((item, index) => (
        <tr key={index}>
          <td>{item.A}</td>
          <td>{fetch2[index]?.B ?? ''}</td>
        </tr>
      ))}
    </tbody>
  </Table>
</ModalBody>

如果两个数组长度不确定，需要以更长的数组为准展示所有数据，可以调整为如下写法：

<ModalBody>
  <Table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      {Array.from({length: Math.max(fetch1.length, fetch2.length)}).map((_, index) => (
        <tr key={index}>
          <td>{fetch1[index]?.A ?? ''}</td>
          <td>{fetch2[index]?.B ?? ''}</td>
        </tr>
      ))}
    </tbody>
  </Table>
</ModalBody>

• 按索引对应两个数组的元素，保证同索引的A、B值放在同一行
• 用可选链 ?. 和空值合并运算符 ?? 做兜底，避免数组长度不一致时出现报错

内容的提问来源于stack exchange，提问作者Raghu