ReactJS基于REST API返回JSON动态渲染ag-grid行列的实现咨询

你提到的预定义最多5个商品的表头配置、再根据实际返回的商品动态调整hide属性的方案完全可以实现需求，而且由于商品数量上限很低，这个方案实现简单，出错概率也低。

具体实现可以参考以下步骤：

1. 首先预定义基础列配置，第一列为固定的分类列，后续跟5个默认隐藏的商品列
2. 拿到接口返回的JSON数据后，先提取所有出现过的商品名称，存入去重集合
3. 遍历预定义的商品列，判断当前列对应的商品是否在上述集合中，存在则设hide: false，否则保持隐藏
4. 把嵌套的原始JSON数据转换成ag-grid要求的扁平行数据格式，每个分类对应一行，字段为分类名和对应商品的值

示例代码如下：

import { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

// 预定义基础列配置
const BASE_COLUMNS = [
  {
    headerName: '分类',
    field: 'category',
    resizable: true,
    pinned: 'left',
    wrapText: true,
    cellStyle: {'white-space': 'normal'},
    autoHeight: true
  },
  // 预定义5个商品列，默认隐藏
  ...Array.from({length: 5}, (_, idx) => {
    const productId = `Product${idx + 1}`;
    return {
      headerName: productId,
      field: productId,
      resizable: true,
      wrapText: true,
      cellStyle: {'white-space': 'normal'},
      autoHeight: true,
      hide: true
    }
  })
];

const ProductGrid = () => {
  const [columnDefs, setColumnDefs] = useState(BASE_COLUMNS);
  const [rowData, setRowData] = useState([]);

  useEffect(() => {
    // 调用API获取数据
    fetch('/your/api/endpoint')
      .then(res => res.json())
      .then(data => {
        const rawMessage = data.raw_message;
        // 提取所有存在的商品
        const existedProducts = new Set();
        rawMessage.forEach(categoryItem => {
          categoryItem.forEach(product => {
            existedProducts.add(product.product);
          })
        });

        // 动态调整列的显示隐藏
        const finalColumns = BASE_COLUMNS.map(col => {
          if (col.field.startsWith('Product')) {
            return {...col, hide: !existedProducts.has(col.headerName)}
          }
          return col;
        });
        setColumnDefs(finalColumns);

        // 转换为ag-grid支持的行数据格式
        const gridRowData = rawMessage.map(categoryItem => {
          const row = {category: categoryItem.category};
          categoryItem.forEach(product => {
            // 此处product.value替换为你实际存储商品值的字段名
            row[product.product] = product.value;
          });
          return row;
        });
        setRowData(gridRowData);
      })
  }, []);

  return (
    <div className="ag-theme-alpine" style={{height: 600, width: '100%'}}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
};

如果后续商品上限取消，也可以不用预定义列，直接根据提取到的商品集合动态生成列配置，适配性更强，你当前的场景用预定义的方案就足够使用。

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