Material UI Pagination点击页码需两次点击才触发API调用问题求解

问题原因 #

1. React 的状态更新是异步批量执行的，你在 handlePageChange 中先执行 setPage(value)，此时当前作用域里的 page 还是更新前的旧值，紧接着用 page * 10 计算 offset 时，拿到的是上一页的数值，所以 offset 没有更新到目标值，只有第二次点击时，page 已经是上一次更新后的值，才能算出正确的 offset，触发符合预期的请求。
2. Material UI 的 Pagination 组件默认页码从 1 开始，你初始化 page 为 0 也会导致页码和 offset 计算逻辑不匹配。

修复方案 #

直接用回调拿到的新页码 value 计算 offset，不要依赖当前作用域的旧 page 值，同时对齐 MUI 分页组件的页码规则，修改代码如下：

1. 修正状态初始化 #

// 初始页改为1，对齐MUI分页组件的默认规则
const [page, setPage] = useState(1);
// 可选优化：offset可以直接通过page推导，不需要单独存状态，减少状态不同步风险
const offSet = (page - 1) * 10;

2. 修正分页切换逻辑 #

const handlePageChange = (event, value) => {
  setPage(value);
  // 如果要保留offset单独状态，直接用新的value计算即可：
  // setOffSet((value - 1) * 10);
};

3. 调整useEffect依赖（如果去掉了offset单独状态的话） #

// 依赖改为page，offset在retrieveCustomers里直接用推导值即可
useEffect(retrieveCustomers, [page]);

修改后点击分页就可以立刻触发携带正确offset的请求，不需要点击两次。

内容的提问来源于stack exchange，提问作者Rabindra Kumar Mahato