MUI DataGrid分页与加载属性异常问题求助

1. Loading 属性未生效问题 #

原因分析 #

代码里的fetchData函数同步触发Loading状态的开启和关闭，没有给异步请求（或模拟加载）留出时间，导致Loading状态瞬间切换，视觉上完全看不到加载效果。如果实际有后端数据请求，也没有在请求完成后再关闭Loading。

修复代码 #

如果是真实后端请求，修改为异步函数并在请求完成后关闭Loading：

useEffect(() => {
    const fetchData = async () => {
        pageStateChange('isDataGridLoading', true);
        try {
            // 替换为你的实际请求逻辑
            const res = await fetch(`/api/data?pageNo=${pageState.pageNo}&pageSize=${pageState.pageSize}`);
            const result = await res.json();
            pageStateChange('data', result.list); // 更新表格数据
        } catch (err) {
            console.error('请求失败:', err);
        } finally {
            pageStateChange('isDataGridLoading', false);
        }
    }
    fetchData();
}, [pageState.pageNo, pageState.pageSize]);

如果只是模拟加载效果，添加延时：

useEffect(() => {
    const fetchData = async () => {
        pageStateChange('isDataGridLoading', true);
        // 模拟1秒加载时长
        await new Promise(resolve => setTimeout(resolve, 1000));
        pageStateChange('isDataGridLoading', false);
    }
    fetchData();
}, [pageState.pageNo, pageState.pageSize]);

2. 分页功能异常问题 #

原因分析 #

• 初始pageSize设为100，rowsPerPageOptions=[10]仅提供可选条数，不会自动覆盖初始值，导致默认显示100条；
• 开启paginationMode="server"后，DataGrid不会做前端分页，若后端返回的是全部500条数据而非分页后的10条，表格就会显示所有数据；
• 分页参数变化时，需确保后端能根据pageNo和pageSize返回对应分页数据。

修复步骤 #

1. 修正初始pageSize值
   将默认状态的pageSize改为10，与rowsPerPageOptions的选项匹配：

const defaultPageState = {
    isDataGridLoading: false,
    data: [],
    pageNo: 1,
    pageSize: 10 // 从100改为10
}

2. 确保后端按分页参数返回数据
   当pageNo或pageSize变化时，后端需要接收这两个参数，返回对应页码的分页数据，而非全部500条。

3. 验证参数传递逻辑
   确认useEffect中请求后端时，正确传递pageNo和pageSize，确保每次分页变化都能请求到对应数据。

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