React Table组件如何适配对象数组结构数据？

核心思路 #

通过增强列配置的字段映射能力，同时兼容原有数组嵌套数组结构，实现对对象数组数据的无缝适配，既保证现有功能不受影响，又能支持新的数据格式。

1. 升级列配置，添加字段映射 #

在原有列配置中新增data_field属性，用于指定当前列对应对象数组中的字段名，让列与数据字段建立明确关联：

const TableConfig = {
  column_config: [
    {
      title: "",
      col_span: 1,
      sorted_order: "None",
      data_type: "check_box",
      cell_click_callback: true,
      data_field: "id" // 对应对象的id字段
    },
    {
      title: "Company",
      col_span: 1,
      sorted_order: "None",
      data_type: "text",
      cell_click_callback: false,
      data_field: "compName" // 对应对象的compName字段
    },
    {
      title: "Desc",
      col_span: 1,
      sorted_order: "None",
      data_type: "text",
      cell_click_callback: false,
      data_field: "desc" // 对应对象的desc字段
    }
  ]
};

export default TableConfig;

2. 修改Table组件渲染逻辑，兼容两种数据结构 #

在组件中增加数据类型判断，分别处理数组嵌套数组和对象数组的渲染逻辑，确保新旧数据格式都能正常展示：

const Grid = (props) => {
  const colConfig = props.GridConfig.column_config;
  const gridData = props.GridData.data;

  // 判断当前行数据的结构类型
  const isRowArray = Array.isArray(gridData[0]);

  return (
    <div className="table-responsive pt-3">
      <table className="table table-bordered table-striped" width="100%">
        <thead>
          <tr>
            {colConfig.map((d, key) => (
              <th key={key} colSpan={d.col_span} className={d.title_class}>
                {d.title}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {gridData.map((rowData, rIndex) => {
            // 兼容两种结构的行ID获取
            const rowId = isRowArray ? rowData[0].id : rowData.id;
            // 兼容原有结构的行样式
            const rowClass = isRowArray ? rowData[0].row_properties : "";

            return (
              <tr key={`tr_${rowId}`} className={rowClass}>
                {colConfig.map((col, cIndex) => {
                  // 根据数据结构获取单元格数据
                  let colData;
                  if (isRowArray) {
                    // 原有数组结构：跳过第一个id对象，取对应索引的元素
                    colData = rowData[cIndex + 1];
                  } else {
                    // 新对象结构：通过data_field映射获取字段值
                    colData = rowData[col.data_field];
                  }

                  return (
                    <td
                      key={`td_${rIndex}_${cIndex}`}
                      className={col.data_col_class}
                    >
                      {/* 文本类型带点击回调的渲染 */}
                      {col.data_type === "text" && col.cell_click_callback && (
                        <div>
                          <a
                            onClick={() =>
                              clickCallback(col.title, cIndex + 1, rowId)
                            }
                          >
                            {colData}
                          </a>
                        </div>
                      )}
                      {/* 普通文本类型渲染 */}
                      {col.data_type === "text" && !col.cell_click_callback && (
                        <div>{colData}</div>
                      )}
                      {/* 复选框类型渲染（补充原有缺失逻辑） */}
                      {col.data_type === "check_box" && (
                        <input type="checkbox" value={rowId} />
                      )}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

3. 替换数据源为对象数组 #

在组件初始化时直接使用新的对象数组数据源即可：

let GridConfig = {};
let grid_data = {};

GridConfig = TableConfig;
grid_data = newStoreData; // 替换为对象数组结构的数据源

const [gridConfigData, setGridConfigData] = useState(GridConfig);
const [gridData, setGridData] = useState(grid_data);

return (
  <>
    <Grid GridConfig={gridConfigData} GridData={gridData} />
  </>
);

方案优势 #

• 配置驱动：通过data_field实现列与数据的解耦，新增或修改列只需调整配置，无需修改组件核心逻辑
• 双向兼容：同时支持原有数组嵌套数组和新的对象数组结构，平滑过渡现有功能
• 可扩展性强：后续新增数据类型或字段，只需在列配置中添加对应规则即可

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