DataGrid切换分页仅显示单条数据问题求助

核心问题是MUI DataGrid默认启用客户端分页，会自动对传入的rows做本地分页截取。但你的逻辑是通过API直接获取对应页码的完整数据，所以需要切换为服务器端分页模式。

修复步骤： #

• 在DataGrid组件中添加paginationMode="server"属性，禁用本地分页处理
• 提前通过控制台打印t.data，确认API返回的确实是当前页的完整数据集

修改后的完整代码： #

const [param, setParam] = useState({
    page: 1,
    pageSize: 10,
  });
useEffect(() => {
    const fetchData = async () => {
      try {
        const t = await fetcherGetListProduct(
          param.page,
          param.pageSize,
          false
        );
        setTotalRowCount(t.total);
        setData(t.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
}, [param]);
const handlePageChange = (value) => {
    setParam({ page: value.page, pageSize: value.pageSize });
};

<DataGrid
   rows={data || []}
   columns={columns2}
   components={{ Toolbar: GridToolbar }}
   initialState={{
   pagination: {
       paginationModel: { pageSize: 10, page: 1 },
     },
   }}
   pageSizeOptions={[5, 10, 25]}
   rowCount={totalRowCount}
   onPaginationModelChange={handlePageChange}
   paginationMode="server" // 新增这一行
/>

添加paginationMode="server"后，DataGrid会直接渲染你传入的所有rows数据，不再进行本地分页截取，这样就能正常显示对应页面的全部内容了。

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