React将接口返回嵌套JSON转换为无Material-UI的可视化表格

• 全量保留API返回的原始JSON响应结构，不拆分丢弃顶层count字段，保证表格展示、后续数据可视化两个场景可以共用同一份数据源
• 基于React原生渲染能力实现，不引入Material-UI等第三方UI组件，仅使用浏览器原生<table>标签完成表格渲染
• 抽离独立的列映射配置，统一管理字段和展示规则，避免表格和可视化场景重复定义字段映射逻辑，减少维护成本

import React from 'react';

// 抽离列配置：表格渲染、后续数据可视化可直接复用，避免重复维护字段映射
const TABLE_COLUMNS = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: '名称' },
  { key: 'description', label: '描述' },
  { 
    key: 'url', 
    label: '访问地址',
    // 纯文本展示地址，不做跨站跳转
    render: (row) => <span>{row.url}</span>
  },
  { key: 'state', label: '状态' },
  { key: 'revision', label: '版本号' },
  { key: 'visibility', label: '可见性' },
  { key: 'lastUpdateTime', label: '最后更新时间' }
];

export const DataTable = ({ apiResponse }) => {
  // 直接解构完整响应，不拆分丢弃顶层字段
  const { count, value: tableData } = apiResponse;

  return (
    <div className="data-table-wrapper">
      {/* 单独展示接口返回的总计数，数值完全取自接口返回，不使用数组长度替代 */}
      <div className="table-summary">
        总记录数：<strong>{count}</strong>
      </div>
      <table className="base-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            {TABLE_COLUMNS.map(col => (
              <th 
                key={col.key} 
                style={{ padding: '12px 8px', borderBottom: '2px solid #eee', textAlign: 'left' }}
              >
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {tableData.map(row => (
            <tr key={row.id}>
              {TABLE_COLUMNS.map(col => (
                <td 
                  key={col.key} 
                  style={{ padding: '10px 8px', borderBottom: '1px solid #f0f0f0' }}
                >
                  {/* 列配置包含自定义渲染规则时走自定义逻辑，否则直接取字段值展示 */}
                  {col.render ? col.render(row) : row[col.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// 组件调用示例：将API返回的完整JSON直接传入即可
// const apiRes = {
//   "count": 28,
//   "value": [/* 接口返回的value数组 */]
// };
// <DataTable apiResponse={apiRes} />

• 存储接口数据时，将完整响应对象作为整体存入组件状态或全局状态，不要只单独存value数组、把count作为临时变量处理，避免后续数据可视化时拿不到接口原始返回的总计数
• 总计数的展示严格取接口返回的count字段值，不要使用遍历得到的数组长度作为计数，保证数值和接口返回完全一致——比如示例接口返回count为28时，即使当前分页只返回2条value数据，展示的总计数依然为28，适配分页类接口的常见场景
• 采用内联样式或原生CSS实现表格样式即可，不需要依赖第三方组件库的样式体系，保证无额外依赖
• 后续做数据可视化时，可直接读取存储的完整响应对象、复用TABLE_COLUMNS的字段映射规则，不需要重新解析JSON结构，避免多场景下数据不一致

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