Material UI TablePagination结合Redux/React的双向分页实现问题

嘿，我懂你现在碰到的糟心事——用Redux+React管理Material UI表格分页时，点上一页、下一页按钮居然都只会跳去下一页，完全没法后退对吧？其实问题大概率出在你处理onChangePage事件的逻辑上，咱们一步步把它捋顺。

问题根源 #

Material UI的TablePagination组件的onChangePage回调本身已经帮你算好了目标页码，它的参数签名是这样的：

(event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void

第二个参数page就是点击按钮后该跳转的准确页码——不管你点的是上一页、下一页，还是直接点页码数字，这个值都是现成的正确结果。如果你的代码里是手动给当前页码加1（比如写currentPage + 1），那不管点哪个按钮都会往前进，自然没法后退。

正确实现方式 #

你完全不用自己判断按钮类型或者手动算页码，直接把回调里的page参数同步到Redux状态就行：

1. 写对事件处理函数

const handleChangePage = (event, page) => {
  // 直接用Material UI传入的page值更新Redux状态
  dispatch(setPage(page));
};

2. 确保Redux状态正确更新
   你的reducer要正确接收新的页码值：

const initialState = {
  currentPage: 0, // 注意Material UI的页码是从0开始计数的哦
  rowsPerPage: 10,
  totalItems: 100
};

const tableReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_PAGE':
      return {
        ...state,
        currentPage: action.payload
      };
    // 其他状态处理逻辑...
    default:
      return state;
  }
};

3. 组件中正确传递属性
   把从Redux获取到的currentPage传给TablePagination的page属性：

import { useSelector, useDispatch } from 'react-redux';
import { TablePagination } from '@mui/material';

const MyTable = () => {
  const dispatch = useDispatch();
  const { currentPage, rowsPerPage, totalItems } = useSelector(state => state.table);

  const handleChangePage = (event, page) => {
    dispatch({ type: 'SET_PAGE', payload: page });
  };

  return (
    <TablePagination
      component="div"
      count={totalItems}
      page={currentPage}
      onChangePage={handleChangePage}
      rowsPerPage={rowsPerPage}
      onChangeRowsPerPage={(e) => dispatch({ type: 'SET_ROWS_PER_PAGE', payload: parseInt(e.target.value, 10) })}
      // 其他必要属性...
    />
  );
};

为啥这样能解决问题？ #

Material UI的分页组件内部已经把所有页码计算逻辑处理完了：点上一页时，它会自动把page设为currentPage - 1；点下一页时设为currentPage + 1；点击具体页码时直接设为对应值。你要做的只是把这个现成的正确值同步到Redux状态里，完全不用自己去判断点击的是哪个按钮。

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