MUI X Data Grid v6手动修改每页行数不生效问题求助

核心问题分析 #

你遇到的问题大概率是这几个原因：

• 更新paginationModel时没重置页码，导致新的每页行数下当前页码超出范围，DataGrid自动兼容但未同步UI
• DataGrid未正确绑定paginationModel状态，或分页模式配置错误
• 数据请求未使用最新的paginationModel参数

具体解决方案 #

1. 确保状态与DataGrid正确绑定

用useState管理分页模型时，必须把paginationModel传给DataGrid，同时监听onPaginationModelChange更新状态，并且配置正确的分页模式：

import { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const YourComponent = () => {
  // 初始化分页模型，MUI Data Grid的页码是0基
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 5,
  });
  const [rows, setRows] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  // 搜索提交处理
  const handleSubmitData = (formValues) => {
    setSearchQuery(formValues.search);
    // 更新每页行数时强制重置页码为0，避免页码越界
    setPaginationModel(prev => ({
      ...prev,
      pageSize: Number(formValues.pageSize),
      page: 0,
    }));
  };

  // 监听搜索参数和分页模型变化，重新请求数据
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        // 携带最新的分页参数和搜索关键词请求数据
        const res = await fetch(`/your-api-path?search=${searchQuery}&page=${paginationModel.page}&pageSize=${paginationModel.pageSize}`);
        const data = await res.json();
        setRows(data.rows);
        setTotalRows(data.totalCount);
      } catch (err) {
        console.error('数据请求失败:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [searchQuery, paginationModel]); // 依赖项必须包含这两个，确保参数变化触发请求

  return (
    <div>
      {/* 搜索表单 */}
      <form onSubmit={(e) => {
        e.preventDefault();
        handleSubmitData({
          search: searchQuery,
          pageSize: document.getElementById('pageSizeInput').value
        });
      }}>
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="输入关键词搜索"
        />
        <input
          type="number"
          id="pageSizeInput"
          defaultValue={5}
          min="1"
          placeholder="每页行数"
        />
        <button type="submit">搜索</button>
      </form>

      {/* DataGrid组件 */}
      <DataGrid
        rows={rows}
        columns={yourColumnConfig} // 替换成你的列配置
        paginationModel={paginationModel}
        onPaginationModelChange={setPaginationModel}
        paginationMode="server" // 服务端分页必须设置此项
        rowCount={totalRows} // 服务端分页需传入总数据条数
        loading={loading}
        disableRowSelectionOnClick
      />
    </div>
  );
};

export default YourComponent;

2. 关键注意事项

• 重置页码：每次修改pageSize时必须把page设为0，否则如果之前的页码在新的每页行数下超出范围（比如原page=2、pageSize=5，总数据12条；改成pageSize=10后，page=2无对应数据），DataGrid自动调整页码可能导致UI和数据不同步。
• 分页模式：服务端分页必须设置paginationMode="server"，否则DataGrid会用客户端逻辑处理分页，忽略你传入的rowCount和请求参数。
• 客户端分页场景：如果是客户端分页，无需设置paginationMode="server"，但要确保更新pageSize后，数据按新的pageSize重新切片：

  useEffect(() => {
    // allRows是完整的客户端数据
    const startIndex = paginationModel.page * paginationModel.pageSize;
    const endIndex = startIndex + paginationModel.pageSize;
    setRows(allRows.slice(startIndex, endIndex));
  }, [allRows, paginationModel]);
  

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