React与JavaScript中如何映射嵌套report对象并按要求渲染表格？

你已经通过Object.keys()拿到了外层的所有标题key，接下来只需要嵌套遍历即可：先遍历每个外层key渲染独立表格，再遍历每个key对应的数组渲染表格行即可。

完整实现代码示例 #

import React from 'react';

const ReportTable = ({ reportData }) => {
  // 可按需调整你实际的report数据层级，示例中对应你提到的report.report.report路径
  return (
    <div className="report-container">
      {/* 第一层遍历：所有外层标题key，每个key对应一个独立表格 */}
      {Object.keys(reportData).map((tableTitle) => {
        const rowList = reportData[tableTitle];
        return (
          <table key={tableTitle} style={{ margin: '20px 0', borderCollapse: 'collapse' }}>
            <thead>
              {/* 外层key作为表格主表头 */}
              <tr>
                <th colSpan={2} style={{ border: '1px solid #ccc', padding: '8px', background: '#f5f5f5' }}>
                  {tableTitle}
                </th>
              </tr>
              {/* 表格列标题 */}
              <tr>
                <th style={{ border: '1px solid #ccc', padding: '8px' }}>指标</th>
                <th style={{ border: '1px solid #ccc', padding: '8px' }}>结果</th>
              </tr>
            </thead>
            <tbody>
              {/* 第二层遍历：当前表格的行数据 */}
              {rowList.map((row, index) => (
                <tr key={`${tableTitle}-row-${index}`}>
                  <td style={{ border: '1px solid #ccc', padding: '8px' }}>{row.title}</td>
                  <td style={{ border: '1px solid #ccc', padding: '8px' }}>{row.result}</td>
                </tr>
              ))}
            </tbody>
          </table>
        );
      })}
    </div>
  );
};

export default ReportTable;

组件调用方式 #

// 传入你实际获取到的report对象即可
<ReportTable reportData={report.report.report} />

核心逻辑说明 #

• 第一层遍历Object.keys(reportData)返回的标题数组，每个值对应一个独立表格的主标题
• 第二层遍历每个标题对应的业务数据数组，依次取title和result字段填充表格行的两列
• 所有动态生成的元素都添加了唯一key属性，符合React渲染规则，避免控制台警告

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