解决含列数组的JavaScript对象渲染表格时内容全在首列的问题

你的代码问题出在分别遍历不同列的数组，且每个元素都生成独立的行：

• 遍历manufacturer时，每个元素生成一个只包含该值的<tr>，导致Google、Apple各占一行第一列
• 接着遍历serialNumber，同样每个元素生成单独行，所有内容都堆在第一列，还完全遗漏了modelNumber列的数据

要按行来渲染数据：因为每个列数组的长度一致，我们可以基于其中一个数组的索引，同时取出三列对应位置的值，组合成完整的一行。

修正后的代码如下：

{equipmentTable && (
  <table className="def-tbl">
    <thead>
      <tr> {/* 注意thead里的<th>必须包裹在<tr>内，符合HTML标准结构 */}
        <th>Manufacturer</th>
        <th>Model Number</th>
        <th>Serial Number</th>
      </tr>
    </thead>
    <tbody>
      {equipmentTable.manufacturer.map((_, index) => (
        <tr key={equipmentTable.serialNumber[index]}> {/* 优先用数据里的唯一值当key，比如序列号 */}
          <td>{equipmentTable.manufacturer[index]}</td>
          <td>{equipmentTable.modelNumber[index]}</td>
          <td>{equipmentTable.serialNumber[index]}</td>
        </tr>
      ))}
    </tbody>
  </table>
)}

• 标准HTML表格中，<thead>内的表头单元格必须嵌套在<tr>中，之前的写法不符合规范
• React列表渲染必须添加key属性，优先使用数据中的唯一标识（如序列号）而非索引，避免渲染警告
• 如果存在各列数组长度不一致的可能，建议先做长度校验，防止索引越界报错

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