MUI X Data Grid表格分页功能失效，求排查方案

你的DataGrid配置了客户端分页但未生效，控制台无报错，可从以下几个方向排查：

• 确认数据量是否满足分页条件：如果people数组的长度≤5（当前设置的pageSize），分页控件会处于不可用状态，自然无法切换分页。先检查people数据的实际条数是否超过5条。
• 验证行ID的唯一性：getRowId返回的row.id必须是唯一值，若存在重复，DataGrid无法正确识别行数据，会导致分页逻辑异常。可在组件内添加console.log(people.map(p => p.id))，检查是否有重复ID。
• 排查autoHeight属性的影响：autoHeight会让表格高度自适应内容，分页后行数减少可能导致视觉上误以为分页未生效。临时替换为固定高度（如height: 600）测试，看分页是否正常工作。
• 检查MUI X版本兼容性：paginationModel是v6+版本的API，若你使用的是v5及以下版本，需改用单独的page和pageSize属性，而非对象形式。查看package.json中的@mui/x-data-grid版本，v5的写法示例：

  page={0}
  pageSize={5}
  

• 测试columns配置是否正常：若usePeopleTable返回的columns存在错误（比如列的field与Person类型的属性不匹配），可能导致表格渲染异常，间接影响分页。临时替换为简单测试列（如[{ field: 'id', headerName: 'ID' }, { field: 'name', headerName: '姓名' }]），验证分页是否恢复正常。
• 确认Redux数据的更新触发渲染：如果people是异步加载的，首次渲染时可能数据未加载完成，后续数据更新后需确保组件重新渲染。添加console.log(people.length)，确认数据加载完成后条数符合预期。
• 移除冗余配置：pagination={true}和paginationMode='client'都是v6版本的默认值，这些冗余属性虽不影响功能，但可尝试移除，简化配置后测试。

简化测试代码示例 #

import { DataGrid } from '@mui/x-data-grid';
import { useSelector } from 'react-redux';

import type { GridRowModel } from '@mui/x-data-grid';
import type { Person } from '../../../../interfaces/people';
import type { AppStore } from '../../../../redux/store';

import { usePeopleTable } from './hooks/usePeopleTable';

const PeopleTable: React.FC = () => {
  const { columns } = usePeopleTable();
  const people: Person[] = useSelector((state: AppStore) => state.people);

  // 临时打印数据信息用于排查
  console.log('数据总条数:', people.length);
  console.log('所有行ID:', people.map(p => p.id));

  return (
    <DataGrid
      style={{
        marginTop: '2rem',
        maxWidth: '900px',
        backgroundColor: 'white',
        width: '100%',
        height: 600,
      }}
      columns={columns}
      rows={people}
      disableColumnSelector
      disableRowSelectionOnClick
      pageSizeOptions={[5, 10, 25]}
      paginationModel={{
        pageSize: 5,
        page: 0,
      }}
      getRowId={(row: GridRowModel) => row.id}
    />
  );
};

export default PeopleTable;

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