mui-x DataGrid排序后getRowIndexRelativeToVisibleRows返回undefined求助

问题分析 #

你遇到的getRowIndexRelativeToVisibleRows排序后返回undefined的问题，是因为该方法依赖的内部行索引映射在排序操作后未正确同步，导致无法匹配行ID对应的可见行位置。

解决方案 #

方案1：直接使用渲染参数中的index属性（推荐） #

DataGrid的renderCell回调参数中自带index字段，该字段直接对应当前行在排序、分页后的可见行列表中的位置索引，无需调用API方法，可靠性更高：

renderCell: (params) => {
  return params.index + 1;
}

方案2：通过获取可见行ID列表计算索引 #

如果需要基于API方法实现，可以先获取当前可见行的ID数组，再通过ID匹配索引：

renderCell: (params) => {
  // 获取当前分页、排序后的可见行ID列表
  const visibleRowIds = params.api.getState().pagination.rows;
  const rowIndex = visibleRowIds.indexOf(params.id);
  // 处理边界情况，避免出现NaN
  return rowIndex !== -1 ? rowIndex + 1 : '';
}

验证说明 #

替换上述代码后，排序操作会自动更新index或可见行ID列表，序号会随行的位置变化同步更新，解决排序后序号显示异常的问题。

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