React DataGrid重复渲染最后一行数据问题求助

你的问题出在MUI DataGrid的getRowId配置上：

getRowId={(row) => row.accountId}

从请求参数能看到accountId: 1，API返回的所有行的accountId都是同一个值。DataGrid依赖getRowId返回的唯一值来区分不同行，当所有行的标识重复时，组件会把所有行判定为同一个，最终只渲染最后一行的数据并重复显示。

解决步骤 #

1. 检查API返回数据：确认每个行对象是否存在唯一字段（比如id、regionId这类每行都不同的属性）。
2. 修改getRowId配置：替换为返回唯一值的逻辑，比如：

   // 假设行对象有唯一的id字段
   getRowId={(row) => row.id}
   

3. 无唯一字段的处理方案：可以组合多个字段生成唯一标识，或者手动添加唯一ID：
   • 组合字段示例：

     getRowId={(row) => `${row.regionName}-${row.subRegionName}-${row.marketName}`}
     

   • 手动生成唯一ID：

     const rows = grid ? grid.items.map(item => ({...item, uniqueId: crypto.randomUUID()})) : [];
     // 之后getRowId使用这个唯一ID
     getRowId={(row) => row.uniqueId}
     

代码修改示例 #

以使用行对象的唯一id为例，修改三个StyledDataGrid组件的getRowId：

// Left table
<StyledDataGrid
  autoHeight 
  getRowId={(row) => row.id} // 替换为唯一字段
  hideFooterPagination={true}
  components={{
    ColumnSortedAscendingIcon: UnfoldMoreIcon,
    ColumnSortedDescendingIcon: UnfoldMoreIcon,
  }}
  rows={rows}
  columns={fixedColumnLeft}
  disableSelectionOnClick
  experimentalFeatures={{ newEditingApi: true }}
/>

另外两个表格（Center和Right）做同样的getRowId修改即可。

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