如何在MUI X Data Grid中显示关联Item的名称？

MUI X Data Grid的field字段不支持直接使用嵌套路径（比如user_id.name），所以你直接这么配置会显示空白。要展示user_id和item_id里的name属性，有两种常用方法：

方法1：使用valueGetter（推荐用于纯文本显示） #

通过valueGetter自定义单元格的值获取逻辑，它能访问当前行的完整数据对象，直接提取嵌套属性：

const columns = [
  { 
    field: 'user_id', 
    headerName: 'User',
    flex: 1,
    valueGetter: (params) => params.row.user_id?.name
  },
  { 
    field: 'item_id', 
    headerName: 'Item',
    flex: 1,
    valueGetter: (params) => params.row.item_id?.name
  },
  { field: 'status', headerName: 'Status',flex: 1},
  { field: 'prepared_by', headerName: 'Prepared By',flex: 1},
  { field: 'date_ordered', headerName: 'Date Ordered',flex: 1},
  { field: 'date_received', headerName: 'Date Received',flex: 1},
];

这里用?.可选链操作符是为了避免user_id或item_id为null/undefined时抛出错误，保证页面稳定性。

方法2：使用renderCell（适合自定义渲染场景） #

如果需要对显示内容做样式调整、添加图标等自定义操作，可以用renderCell返回React元素：

const columns = [
  { 
    field: 'user_id', 
    headerName: 'User',
    flex: 1,
    renderCell: (params) => <span style={{ color: '#1976d2' }}>{params.row.user_id?.name}</span>
  },
  { 
    field: 'item_id', 
    headerName: 'Item',
    flex: 1,
    renderCell: (params) => <span>{params.row.item_id?.name}</span>
  },
  // 其他列保持不变
];

这两种方法都能解决你当前的问题，根据实际需求选择即可。

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