如何在MUI Datagrid中获取对象的子对象属性值？

MUI Datagrid的field属性不支持直接通过点语法（如type.name）或方括号语法访问嵌套属性，你可以用以下两种方法解决：

方法一：预处理数据，提取嵌套属性为顶层字段 #

在获取数据后，把嵌套的type.name提取成顶层字段，之后直接在列配置中使用这个新字段：

useEffect(() => {
    PetService.getAll("/pets")
      .then(response => {
        // 处理数据，新增typeName字段
        const processedPets = response.content.map(pet => ({
          ...pet,
          typeName: pet.type?.name || '未指定' // 可选链避免type为空时报错
        }));
        setData(processedPets);
      })
  }, [setData]);

列配置示例：

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '宠物名称', width: 130 },
  { field: 'typeName', headerName: '宠物类型', width: 150 },
];

方法二：使用valueGetter函数直接获取嵌套值 #

不需要修改原数据，通过列配置的valueGetter自定义取值逻辑：

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '宠物名称', width: 130 },
  {
    field: 'type',
    headerName: '宠物类型',
    width: 150,
    // 通过valueGetter返回嵌套属性值
    valueGetter: (params) => params.row.type?.name || '未指定'
  },
];

两种方法都能解决问题，如果你需要保留原数据结构，优先选方法二；如果后续多处需要用到这个嵌套属性，预处理数据会更方便。

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