React调用setCurrentPage后打印值与入参不一致是什么原因？如何解决？

你的猜测完全正确，React的useState更新是异步批量执行的，调用setCurrentPage之后不会立刻修改当前渲染上下文里的currentPage值，需要等到组件完成重渲染后，下次渲染函数执行时才能拿到更新后的状态值。你在logsPagination里打印的是当前这一次渲染闭包里捕获的旧的currentPage，所以永远会比入参page慢一拍，两者始终不一致。

要在状态更新完成后拿到最新值，有两种常用实现方式：

方案1：用useEffect监听currentPage变化 #

把需要在状态更新后执行的逻辑放到useEffect中，依赖项设置为currentPage，只要currentPage更新完成、组件重渲染后，这个useEffect就会触发，拿到的就是最新值：

// 把需要依赖最新currentPage的逻辑放到这个useEffect里
useEffect(() => {
  console.log("currentPage " + currentPage);
}, [currentPage])

function logsPagination(page) {
  setCurrentPage(page);
  // 入参page本身就是你要设置的目标值，直接打印即可得到和最新currentPage一致的结果
  console.log("page" + page);
}

如果你只是要两个打印值相等，甚至不需要等状态更新，直接用入参page作为最新值使用即可，本来你就是要把currentPage设置为page。

方案2：直接复用入参page做后续逻辑 #

如果你的后续逻辑必须在logsPagination这个函数调用栈里执行、不需要等页面重渲染，直接用传入的page变量作为最新页码处理即可，不需要等setCurrentPage返回更新结果。

另外你的代码还可以做小优化：给分页按钮加边界禁用逻辑，比如第一页时禁用上一页和首页按钮，最后一页时禁用下一页和尾页按钮，避免出现负数或者超过maxPage的无效页码。

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