如何使用React将嵌套对象数组展示为表格

问题描述 #

我有一个嵌套对象数组，想通过React将其展示为表格格式，尝试了以下代码但没得到预期效果：

var countdetails = [
  {
    enabled: { IN: 354, MY: 181 },
    pending: { IN: 34, MY: 11 },
    total: { IN: 388, MY: 192 }
  }
];

export default function App() {
  return (
    <div className="App">
      <table>
        {countdetails.map((e) => (
          <>
            <tr>
              <td>countries</td>
              <td>enabled</td>
              <td>pending</td>
            </tr>
            <tr>
              <td>{Object.keys(e.enabled)}</td>
              <td>{Object.values(e.enabled)}</td>
              <td>{Object.values(e.pending)}</td>
            </tr>
          </>
        ))}
      </table>
    </div>
  );
}

预期输出表格：

countries enabled pending
IN         354     34
MY         181      11

问题分析 #

现有代码的问题在于，直接使用Object.keys(e.enabled)和Object.values(e.enabled)会把所有国家/数值一次性渲染到单个<td>里，导致所有内容挤在一行，不符合预期的每行一个国家的结构。

解决方案 #

我们需要先提取所有国家列表，然后遍历每个国家，分别对应取出enabled和pending中的数值，生成单独的表格行。修改后的代码如下：

var countdetails = [
  {
    enabled: { IN: 354, MY: 181 },
    pending: { IN: 34, MY: 11 },
    total: { IN: 388, MY: 192 }
  }
];

export default function App() {
  // 提取所有国家（假设enabled和pending的国家列表一致）
  const countries = countdetails.length > 0 ? Object.keys(countdetails[0].enabled) : [];

  return (
    <div className="App">
      <table border="1"> {/* 加border方便查看结构，实际可通过CSS自定义样式 */}
        {/* 渲染表头 */}
        <tr>
          <th>countries</th>
          <th>enabled</th>
          <th>pending</th>
        </tr>
        {/* 遍历每个国家生成表格行 */}
        {countries.map(country => (
          <tr key={country}> {/* 必须添加key属性符合React列表渲染规范 */}
            <td>{country}</td>
            <td>{countdetails[0].enabled[country]}</td>
            <td>{countdetails[0].pending[country]}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

关键修改点： #

• 先从countdetails中提取国家列表，确保后续能逐个遍历生成行
• 使用<th>标签渲染表头，语义更清晰
• 遍历每个国家，为每个国家单独生成一行表格，分别对应取值enabled[country]和pending[country]
• 为循环生成的<tr>添加key属性，避免React警告
• 可选添加border="1"让表格结构更直观（实际项目可通过CSS样式控制）

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