React中Context API Hooks结合Async/await的状态更新问题

嘿，这个坑我之前刚踩过！你遇到的问题核心在于React的useState更新是异步的，而且setPage本身并不返回Promise，所以你用await根本等不到它完成状态更新～

为什么会这样？ #

React为了性能优化，会把状态更新做批量异步处理，不会在调用setPage后立刻更新组件状态和对应的变量。所以在你调用await setPage(page + 1)之后，当前函数作用域里的page还是旧值，新的page要等到组件重新渲染后才会生效。而且setPage没有返回Promise，await它完全起不到等待的作用。

正确的解决方法 #

根据你的需求，分两种场景处理：

1. 只是想在page更新后执行操作（比如打印最新值）

用useEffect监听page的变化，只要page更新，这个钩子就会触发，而且能拿到最新的状态值：

const JobProvider = (props) => {
  const [page, setPage] = useState(1);
  // ...其他状态和函数

  // 监听page变化，拿到最新值
  useEffect(() => {
    console.log("最新的page值：", page);
    // 这里还可以放其他需要在page更新后执行的逻辑，比如请求新分页的数据
  }, [page]); // 依赖数组里放page，只有page改变时才触发

  const nextPage = () => {
    // 推荐用函数式更新，确保基于最新的状态值计算
    setPage(prevPage => prevPage + 1);
  };

  // ...其他代码
};

2. 更新page后需要立刻执行依赖最新值的逻辑

如果你的nextPage函数需要在page更新后立刻做某些事（比如发起分页请求），不要在nextPage里直接等待，而是把逻辑放到useEffect中，就像上面的例子一样。另外，用函数式更新（setPage(prev => prev + 1)）而不是setPage(page + 1)是更稳妥的做法——如果多次快速调用nextPage，函数式更新能确保每次都是基于最新的状态值来计算，避免因为异步更新导致的状态错误。

补充说明 #

别再用await去等setState啦！setState的返回值是undefined，不是Promise，所以await对它完全无效。React的状态更新逻辑就是异步批量的，遵循这个规则来写代码就不会踩坑啦～

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