如何访问嵌套对象并在DataGrid中渲染user_id的username信息

针对你遇到的嵌套对象无法渲染的问题，直接修改列配置，通过valueGetter函数提取嵌套的username即可：

{
  field: "user_id",
  headerName: "User Name",
  width: 250,
  // 添加valueGetter获取嵌套对象中的username
  valueGetter: (params) => params.row.user_id?.username
}

原理说明 #

DataGrid默认会直接读取row[field]的值，当user_id是对象时，直接显示会输出[object Object]或空白。valueGetter允许你自定义从行数据中提取值的逻辑，这里用可选链操作符?.还能避免user_id为null/undefined时抛出错误。

替代方案：预处理数据 #

如果你不想修改列配置，也可以提前扁平化数据源：

const flattenedList = list.map(row => ({
  ...row,
  // 将嵌套的username提取到顶层字段
  user_username: row.user_id?.username
}))

然后列配置改为：

{
  field: "user_username",
  headerName: "User Name",
  width: 250
}

两种方法都能解决问题，推荐第一种，更贴合DataGrid原生用法，无需额外修改数据源结构。

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