MUI Table分页失效：onPageChange与onRowsPerPageChange无响应

核心问题 #

你遇到的问题本质是表格始终渲染原始全量数据，分页状态的变更没有触发数据切片和视图更新，常见原因包括：

• 未基于分页状态（page、rowsPerPage）对原始数据做切片处理
• 分页状态未通过React state管理，或状态更新后未同步到表格渲染逻辑
• 自定义的分页回调方法逻辑错误，未正确更新状态或计算分页数据

修复步骤 #

1. 在父组件中管理分页状态并处理数据切片 #

首先确保父组件中维护分页相关的state，并基于state对原始数据进行切片，再传递给表格组件：

import { useState } from 'react';
import DataTable from './DataTable';

export async function getServerSideProps() {
  // 假设这里已正确获取全量数据
  const res = await fetch('你的数据接口');
  const allData = await res.json();
  return { props: { allData } };
}

export default function ParentPage({ allData }) {
  // 初始化分页状态
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  // 处理分页数据切片
  const paginatedData = allData.slice(
    page * rowsPerPage,
    page * rowsPerPage + rowsPerPage
  );

  // 正确的分页回调方法
  const handlePageChange = (event, newPage) => {
    setPage(newPage);
  };

  const handleRowsPerPageChange = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0); // 切换每页条数时重置到第一页
  };

  return (
    <DataTable
      data={paginatedData}
      total={allData.length}
      page={page}
      rowsPerPage={rowsPerPage}
      onPageChange={handlePageChange}
      onRowsPerPageChange={handleRowsPerPageChange}
    />
  );
}

2. 修正表格组件的分页逻辑 #

确保表格组件正确接收分页相关props，并绑定到MUI的TablePagination组件上，同时渲染的是父组件传递的已切片数据：

import { Table, TableBody, TableCell, TableHead, TableRow, TablePagination } from '@mui/material';

export default function DataTable({
  data,
  total,
  page,
  rowsPerPage,
  onPageChange,
  onRowsPerPageChange
}) {
  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            {/* 你的表头列 */}
            <TableCell>ID</TableCell>
            <TableCell>名称</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {/* 渲染已分页的数据，而非全量数据 */}
          {data.map((item) => (
            <TableRow key={item.id}>
              <TableCell>{item.id}</TableCell>
              <TableCell>{item.name}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        component="div"
        count={total}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={onPageChange}
        onRowsPerPageChange={onRowsPerPageChange}
      />
    </>
  );
}

3. 常见错误排查 #

• 检查是否直接在表格中渲染了allData而不是切片后的paginatedData
• 确认handleRowsPerPageChange中是否正确将字符串转为数字（MUI的下拉框返回的是字符串）
• 确保分页状态更新时，组件会重新渲染（state更新会触发重渲染，若用了非state的变量则不会）

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