AG Grid技术问题：如何处理远程接口返回的首字母大写字段？

方法1：转换接口返回的数据字段名 #

拿到接口数据后，先把每个对象的首字母大写字段转为全小写，再传递给AG Grid的rowData。写个通用转换函数即可：

// 转换单个对象的字段名
const transformItem = (item) => {
  return Object.fromEntries(
    Object.entries(item).map(([key, value]) => [key.toLowerCase(), value])
  );
};

// 处理接口返回的数组数据
const fetchData = async () => {
  const res = await fetch('你的接口地址');
  const rawData = await res.json();
  const transformedData = rawData.map(transformItem);
  // 将transformedData设置为rowData
  setRowData(transformedData);
};

处理后，columnDefs里的field: 'name'就能正确匹配转换后的小写字段，表格正常展示数据。

方法2：使用AG Grid的valueGetter映射字段 #

如果不想修改原始数据，可以在columnDefs中通过valueGetter直接指定读取大写的字段：

const [columnDefs] = useState([
  { 
    field: 'name', 
    headerName: '名称',
    valueGetter: (params) => params.data.Name // 直接读取接口返回的Name字段
  },
  { 
    field: 'type', 
    headerName: '类型',
    valueGetter: (params) => params.data.Type
  }
]);

这种方式适合字段数量不多的场景，不用改动数据结构，直接在列配置中做映射。

方法3：批量生成匹配大小写的columnDefs #

如果字段较多，可以写个工具函数批量生成columnDefs，自动对应首字母大写的接口字段：

// 定义需要的列配置基础信息
const baseColumns = [
  { field: 'name', headerName: '名称' },
  { field: 'type', headerName: '类型' }
];

// 批量添加valueGetter映射
const generateColumnDefs = (columns) => {
  return columns.map(col => ({
    ...col,
    valueGetter: (params) => params.data[col.field.charAt(0).toUpperCase() + col.field.slice(1)]
  }));
};

const [columnDefs] = useState(generateColumnDefs(baseColumns));

这个函数会自动把小写的field转为首字母大写，匹配接口返回的字段名，省去一个个手动配置的麻烦。

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