React中MaterialUI表格TablePagination组件总数据条数显示错误问题

问题根因 #

你遇到的分页总条数显示错误问题，核心是TablePagination组件的count属性传值不符合要求：
Material UI官方定义中，count属性需要传入全部数据的总条目数，你当前代码中传入的list.number是分页接口返回的「当前页码」，不是总数据量，因此分页计算时会出现总条数异常的问题。

修复方案 #

1. 先确认你分页接口返回的总条数字段，通常该字段命名为total、totalCount、totalElements等。
2. 将TablePagination的count属性值替换为对应的总条数字段即可，示例代码如下：

<TablePagination
  component="div"
  className="material-table__pagination"
  // 这里替换为你的总条数字段，??为兜底逻辑，防止字段为空时报错
  count={list.total ?? 0}
  rowsPerPage={rowsPerPage}
  page={page}
  backIconButtonProps={{ 'aria-label': 'Previous Page' }}
  nextIconButtonProps={{ 'aria-label': 'Next Page' }}
  onChangePage={handleChangePage}
  onChangeRowsPerPage={handleChangeRowsPerPage}
  rowsPerPageOptions={[5, 10, 15]}
  dir="ltr"
  SelectProps={{
    inputProps: { 'aria-label': 'rows per page' },
    native: true
  }}
/>

额外注意 #

需要同步校验page参数的合法性，page的最大合法值为Math.ceil(总条数 / rowsPerPage) - 1，翻页时要限制page不超过该最大值，避免出现页码超出范围的异常。

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