React新手求助：MUI Data Grid唯一ID属性报错问题

这个报错的核心是Data Grid组件要求每行必须有唯一标识，下面是两种直接有效的解决方法：

方法1：给每行添加唯一的id属性 #

确保你的行数据数组中，每一项都包含一个唯一的id字段。如果后端返回的数据没有这个字段，可以在前端处理时补充：

示例代码： #

// 假设原始行数据无id字段
const rawRows = [
  { name: "张三", age: 25, email: "zhangsan@example.com" },
  { name: "李四", age: 30, email: "lisi@example.com" }
];

// 前端生成唯一id（可使用uuid库或索引+时间戳确保唯一性）
const rows = rawRows.map((row, index) => ({
  ...row,
  id: `row-${index}-${Date.now()}`
}));

// 渲染Data Grid
<DataGrid rows={rows} columns={columns} />

如果后端返回的数据已有唯一字段（如userId、orderId），直接将其映射为id字段即可：

const rows = rawRows.map(row => ({
  ...row,
  id: row.userId // 用后端唯一字段作为行id
}));

方法2：使用getRowId prop自定义行ID #

如果不想修改行数据结构，可通过getRowId prop指定自定义的唯一标识字段：

示例代码： #

// 行数据包含唯一的userId字段
const rows = [
  { userId: 1001, name: "张三", age: 25 },
  { userId: 1002, name: "李四", age: 30 }
];

// 渲染时指定getRowId
<DataGrid
  rows={rows}
  columns={columns}
  getRowId={(row) => row.userId} // 返回每行的唯一标识
/>

常见排查点 #

• 检查标识字段的唯一性：确认id或自定义字段没有重复值，避免仅用索引（数据更新时可能出现重复）
• 核对字段名拼写：确保字段名大小写与代码一致（如不要把id写成Id）
• 分页/异步加载场景：确保跨页的行ID不会重复

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