已安装MUI X Data Grid v6，但apiRef方法无法调用求助

问题核心 #

升级到@mui/x-data-grid v6.0.0社区版后，使用useGridApiRef获取的apiRef调用setPage等命令式方法时，触发Uncaught TypeError: apiRef.current.setPage is not a function错误，即使完全照搬官方文档示例代码也会出现该问题。

原因分析 #

这是MUI X v6的设计变更，并非项目自身问题，属于普遍现象：
当你通过paginationModel和onPaginationModelChange将分页状态交由外部React State手动控制时，Data Grid会禁用apiRef上对应的命令式分页方法（比如setPage、setPageSize）。因为此时分页状态完全由外部state管理，组件内部不再维护这部分状态，所以apiRef上不会挂载这些方法。

官方合规解决方案 #

根据你的业务需求选择以下两种方案：

方案1：让组件内部管理分页状态 #

如果不需要手动控制分页状态，移除paginationModel和onPaginationModelChange props，此时apiRef的命令式方法即可正常使用：

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function UseGridApiRef() {
    const { data } = useDemoData({
        dataSet: 'Commodity',
        rowLength: 100,
        maxColumns: 6,
    });

    const apiRef = useGridApiRef();

    const handleGoToPage1 = () => apiRef.current.setPage(1);

    return (
        <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">
            <Button onClick={handleGoToPage1}>Go to page 1</Button>
            <Box sx={{ height: 400, width: '100%' }}>
                <DataGrid
                    {...data}
                    apiRef={apiRef}
                    pagination
                    pageSize={10} // 仅设置默认页大小，不手动控制状态
                />
            </Box>
        </Stack>
    );
}

方案2：手动控制分页状态时，直接更新外部State #

如果必须手动管理分页状态，直接修改paginationModel的state即可替代apiRef的命令式调用：

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function UseGridApiRef() {
    const { data } = useDemoData({
        dataSet: 'Commodity',
        rowLength: 100,
        maxColumns: 6,
    });

    const [paginationModel, setPaginationModel] = React.useState({
        page: 0,
        pageSize: 10,
    });

    // apiRef仍可用于其他不需要控制外部状态的方法，比如exportDataAsCsv
    const apiRef = useGridApiRef();

    // 直接更新paginationModel替代setPage调用
    const handleGoToPage1 = () => setPaginationModel(prev => ({
        ...prev,
        page: 1
    }));

    return (
        <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">
            <Button onClick={handleGoToPage1}>Go to page 1</Button>
            <Box sx={{ height: 400, width: '100%' }}>
                <DataGrid
                    {...data}
                    apiRef={apiRef}
                    pagination
                    paginationModel={paginationModel}
                    onPaginationModelChange={setPaginationModel}
                />
            </Box>
        </Stack>
    );
}

补充说明 #

对于exportDataAsCsv这类不依赖外部状态控制的apiRef方法，两种方案下都可以正常调用，不受上述变更影响。

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