TS+React场景下如何将JSON嵌套数组渲染到MaterialUI DataGrid

1. 定义对应的TS类型 #

先根据你的JSON结构定义数据类型，符合TS语法规范同时避免类型不匹配问题：

// 定义objects数组内单个对象的类型
interface ObjectItem {
  stuffId: string;
  name: string;
  description: string | null;
  part: string | null;
}

// 定义接口返回的完整数据结构
interface ResponseData {
  id: string;
  number: string;
  description: string;
  location: string;
  startFrom: string;
  objects: ObjectItem[];
}

2. 调整useState泛型与组件逻辑 #

你原来的AxiosResponse没有指定泛型，属于宽泛类型，调整后TS可以正确推导数据结构：

import { AxiosResponse } from 'axios';
import { useState, useEffect } from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

// 上面的类型定义放在组件外
const YourComponent = () => {
  // 给AxiosResponse指定泛型为我们定义的ResponseData
  const [data, setData] = useState<AxiosResponse<ResponseData> | null>(null);
  // 可选加载状态，优化用户体验
  const [loading, setLoading] = useState(false);

  // 你的axios请求逻辑示例
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await axios.get<ResponseData>('你的接口地址');
        setData(res);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  // 拿到目标数组，空值默认返回空数组避免DataGrid报错
  const tableRows = data?.data.objects ?? [];

  // 3. 定义DataGrid列配置，和ObjectItem字段一一对应
  const columns: GridColDef<ObjectItem>[] = [
    { field: 'stuffId', headerName: '物品ID', width: 150 },
    { field: 'name', headerName: '名称', width: 200 },
    { field: 'description', headerName: '描述', width: 250 },
    { field: 'part', headerName: '部件', width: 150 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      {/* 4. 绑定DataGrid属性，指定getRowId用stuffId作为行唯一标识 */}
      <DataGrid
        rows={tableRows}
        columns={columns}
        getRowId={(row) => row.stuffId}
        loading={loading}
        disableRowSelectionOnClick
      />
    </div>
  );
};

关键说明 #

MUI DataGrid默认要求每行数据必须有id字段作为唯一标识，你的数据中唯一标识是stuffId，必须通过getRowId显式指定，否则会抛出错误导致渲染失败，这是无法绑定数据的最常见原因。

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