如何让Material-UI DataGrid读取数组内嵌套对象的属性数据

实现嵌套属性在DataGrid中展示的两种可行方案 #

方案1：使用列定义的valueGetter属性（无需修改原始数据，推荐优先使用）

直接在列的配置项中新增valueGetter回调，从行数据的嵌套结构中读取对应字段即可，示例代码如下：

const columns = [
  // 原有id列配置不变
  { field: 'id', headerName: 'ID', width: 90 },
  // 嵌套属性列配置示例：读取attributes下的name字段
  {
    field: 'name',
    headerName: '名称',
    width: 150,
    valueGetter: (params) => params.row.attributes?.name ?? '-'
  },
  // 其他嵌套字段同理配置，比如读取attributes下的createTime字段
  {
    field: 'createTime',
    headerName: '创建时间',
    width: 200,
    valueGetter: (params) => params.row.attributes?.createTime ?? '-'
  }
]

代码中可选链?.和空值合并运算符??用于处理数据未加载完成时的异常场景，避免页面报错。

方案2：提前扁平化接口返回数据

在Redux拿到API返回数据后，先对数据做一次扁平化处理，把attributes下的字段提升到数据根层级，再存入Redux store传递给DataGrid，处理逻辑示例：

// 假设rawData是API返回的原始数组
const formattedRows = rawData.map(item => ({
  id: item.id,
  // 展开attributes下的所有字段到根层级
  ...item.attributes
}))
// 之后将formattedRows作为rows参数传给DataGrid即可，列定义和平级数据写法完全一致，不需要加valueGetter

该方案适合嵌套字段较多的场景，可以简化后续列定义的代码量。

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