升级DataGridPro到Premium后分页API失效问题求助

问题描述 #

项目从DataGrid逐步升级到DataGridPremium（版本^6.0.2）后，服务端受控分页功能出现异常：

• 原onPageChange、onPageSizeChange回调函数完全不触发
• 每页行数下拉框显示默认的[25,50,100]，而非自定义配置的[10,20,30,50,100]
  此前升级时曾遇到API命名变更（如onSelectionModelChange改为onRowSelectionModelChange），推测此次为同类版本API调整导致。

相关代码示例：

const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(10);

const onPageChange = (changedPage) => {
    setPage(changedPage);
    handlePagination({ max: pageSize, offset: changedPage * pageSize });
};

const onPageSizeChange = (changedSize) => {
    setPageSize(changedSize);
    handlePagination({ max: changedSize, offset: page * changedSize });
};

<DataGridPremium
    ...
    experimentalFeatures={{ newEditingApi: true }}
    onPageChange={onPageChange}
    onPageSizeChange={onPageSizeChange}
    page={page}
    pageSize={pageSize}
    pagination
    paginationMode="server"
    rowsPerPageOptions={[10, 20, 30, 50, 100]}
/>

解决方法 #

MUI X 6.x版本对分页API做了统一重构，将分散的分页状态合并为单一模型，以下是适配步骤：

1. 重构分页状态与回调 #

废弃原有的page、pageSize独立状态，改用统一的paginationModel状态；同时用onPaginationModelChange替代原有的两个分页回调：

import { useState } from 'react';

// 初始化分页模型
const [paginationModel, setPaginationModel] = useState({
  page: 0,
  pageSize: 10,
});

// 统一处理分页变更
const handlePaginationModelChange = (newModel) => {
  setPaginationModel(newModel);
  // 调用业务分页逻辑
  handlePagination({
    max: newModel.pageSize,
    offset: newModel.page * newModel.pageSize,
  });
};

2. 更新组件属性配置 #

替换DataGridPremium中的分页相关属性，确保使用新API：

<DataGridPremium
    ...
    experimentalFeatures={{ newEditingApi: true }}
    // 新分页模型属性
    paginationModel={paginationModel}
    onPaginationModelChange={handlePaginationModelChange}
    // 保持服务端分页模式
    paginationMode="server"
    // 自定义每页行数选项
    rowsPerPageOptions={[10, 20, 30, 50, 100]}
    pagination
/>

3. 关键注意事项 #

• 禁止同时混用新旧分页API（如同时传递page和paginationModel），组件会优先使用新API导致旧回调失效
• paginationMode="server"必须配置正确，确保组件完全交由外部控制分页状态
• rowsPerPageOptions在6.x版本中仍可使用，但需配合paginationModel才能生效，否则会显示默认值

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