React中如何将对象数组渲染为纵向表头的HTML表格？

两种方式都能实现需求，但更推荐直接修改JSX代码，无需改动原initState的数据结构——原结构本身是合理的（每个元素对应一条完整的商品记录），改动数据反而会增加不必要的转换成本。

具体JSX修改思路 #

1. 先提取所有表头字段：从数组第一个元素中拿到所有属性名（比如id、name、quantity）
2. 遍历这些表头字段，每一个字段对应表格的一行：
   • 第一列是表头文本（用<th>标签）
   • 后续列依次遍历原数组，取出每条记录对应该字段的值（用<td>标签）

示例代码：

function VerticalTable() {
  const initState = [
    { id: 1, name: "bread", quantity: 50 },
    { id: 2, name: "milk", quantity: 20 },
    { id: 3, name: "water", quantity: 10 }
  ];

  // 提取表头字段（需确保initState非空）
  const headers = initState.length > 0 ? Object.keys(initState[0]) : [];

  return (
    <table border="1">
      <tbody>
        {headers.map(header => (
          <tr key={header}>
            <th>{header}</th>
            {initState.map(item => (
              <td key={item.id}>{item[header]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

关于转换数据结构的说明 #

如果非要转换数据结构，也可以把原数组转成「表头-值数组」的形式，比如：

const transformedState = [
  { header: 'id', values: [1, 2, 3] },
  { header: 'name', values: ['bread', 'milk', 'water'] },
  { header: 'quantity', values: [50, 20, 10] }
];

但这种转换完全没必要，既增加了代码复杂度，也不符合原数据的业务语义（原数据是按商品记录存储的，转换后变成按字段维度存储，反而不直观）。

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