React中setState后状态未更新，如何让fetchData等待状态更新？

API 探路者

2026-8-14

解决React状态更新后异步执行fetchData的问题

首先明确问题根源：React的setState是异步批量更新机制，你在handleLoadMore里调用setPageNumber(pageNumber+1)后，当前函数闭包捕获的pageNumber还是更新前的旧值，所以紧接着调用fetchData(pageNumber)必然用的是旧页码。

给你几个靠谱的解决办法：

方案1：直接使用计算后的新页码（最简单）

既然你已经明确新页码是pageNumber+1，完全没必要等state更新，直接把计算好的新值同时传给setPageNumber和fetchData：

const handleLoadMore = () => {
  const newPage = pageNumber + 1;
  setPageNumber(newPage);
  fetchData(newPage);
};

这个方法最直接，彻底避开了state异步更新的问题，适合这种页码简单递增的场景。

方案2：用useEffect监听页码变化（适合依赖更新后state的场景）

如果新页码不是简单的+1，而是需要基于更新后的state计算，那可以用useEffect监听pageNumber的变化，一旦页码更新就触发fetchData：

// 先写监听逻辑
useEffect(() => {
  // 可根据需求加判断，比如初始页码是1的话，第一次渲染不调用fetchData，仅在页码增加时执行
  if (pageNumber > 1) {
    fetchData(pageNumber);
  }
}, [pageNumber, fetchData]); // 依赖数组必须包含pageNumber和fetchData，确保状态变化时触发

// handleLoadMore只负责更新页码，用函数式更新更稳妥
const handleLoadMore = () => {
  setPageNumber(prevPage => prevPage + 1);
};

这里用setPageNumber(prevPage => prevPage + 1)是函数式更新，能确保每次都基于最新的前一页码计算新值，避免快速连续点击时的状态丢失问题。