MUI Data Grid报错：行需唯一id属性，求解决方法

问题分析 #

报错提示明确要求所有行必须有唯一的id属性，或者通过getRowId prop指定自定义唯一标识。你的场景中存在两个问题：一是某条数据的id值为"N"，该值不满足唯一性要求；二是错误处理逻辑中错误地将错误信息赋值给rows，会导致非数组数据传入DataGrid，引发额外渲染错误。

解决方案 #

方案1：处理API返回数据，确保每行ID唯一 #

在获取API数据后，对返回的每条数据进行预处理，替换无效的id值为唯一标识：

修改useEffect中的成功回调部分：

useEffect(() => {
  TicketService.getTickets().then(
    (response) => {
      // 遍历数据，替换值为"N"的id为唯一标识
      const processedRows = response.data.map((row, index) => ({
        ...row,
        id: row.id === "N" ? `ticket-${index}-${Date.now()}` : row.id
      }));
      setRows(processedRows);
    },
    (error) => {
      // 错误时设置空数组，避免传入非数组数据
      setRows([]);

      if (error.response && error.response.status === 401) {
        EventBus.dispatch("logout");
      }
    }
  );
}, []);

方案2：使用getRowId指定自定义唯一标识 #

如果你的Ticket数据本身有其他唯一字段（比如ticketId、uuid等），可以直接通过getRowId prop告诉DataGrid用该字段作为行的唯一标识：

修改DataGrid组件的配置：

<DataGrid
  rows={rows}
  columns={columns}
  // 替换成你数据中实际存在的唯一字段名
  getRowId={(row) => row.ticketId || row.id}
  pageSize={10}
  rowsPerPageOptions={[10]}
  checkboxSelection
  disableSelectionOnClick
/>

额外修复：修正错误处理逻辑 #

原代码中错误时将错误信息赋值给rows，会导致rows变为字符串而非数组，引发DataGrid渲染异常，需改为设置空数组。

验证 #

修改后重新运行项目，确认报错消失，同时测试删除、查看详情等操作是否能正常触发，确保行ID的正确性不影响功能逻辑。

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