Material UI DataGrid多值合并字段报错及空输出问题求助

1. 栈溢出错误原因 #

你最初的代码里定义了两个field: 'user_id'的列，DataGrid不允许同一列配置中出现重复的field值，这会引发内部循环调用，导致Maximum call stack size exceeded错误。

2. 空输出问题修正 #

你后续写的valueFormatter返回空，是因为参数访问路径错误：嵌套对象数据存在params.value属性下，而非直接挂载在params上。

正确代码示例 #

const columns = [
  { field: 'date', headerName: 'Date', flex: 1 },
  { 
    field: 'user_id',
    headerName: 'Shop',
    flex: 1,
    valueFormatter: (params) => {
      // 从params.value中获取嵌套的id和name，兼容空值情况
      const { id = '', name = '' } = params.value || {};
      // 合并后去除首尾多余空格
      return `${id} ${name}`.trim();
    },
  },
];

额外注意 #

确保你的行数据结构符合预期，比如单条行数据格式应为：

{
  date: '2024-05-20',
  user_id: { id: 'shop_001', name: 'XX便利店' }
}

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