React Native中调用搜索函数时如何确保page状态先置为0再执行fetch请求

这个问题其实是React状态更新的异步特性+函数闭包共同导致的，我来给你拆解原因和几个靠谱的解决办法：

问题根源 #

React中useState的更新函数是异步的，而且当你在search函数里调用setPage(0)后，紧接着的console.log(page)和fetch回调里的page，其实捕获的是当前函数作用域里的旧状态值。比如第一次调用search后，fetch异步完成会把page改成1；第二次调用search时，虽然你调用了setPage(0)，但此时函数里的page还是1（因为状态更新还没完成），所以fetch里的page+1会变成2，以此类推，就出现了日志递增的情况。

解决方案 #

方案1：用useEffect监听page状态，确保更新后再发起请求

把重置状态和发起请求分开，利用useEffect的依赖监听，当page被设置为0时再执行fetch，这样能100%保证fetch用的是更新后的page值：

const [data, setData] = useState([]);
const [page, setPage] = useState(0);

const search = () => {
  setData([]);
  setPage(0); // 只负责重置状态
};

// 监听page变化，当page为0时发起请求
useEffect(() => {
  if (page === 0) {
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        // 用函数式更新获取最新的data状态，避免闭包问题
        setData(prevData => prevData.concat(json.content));
        // 同样用函数式更新page，基于最新状态加1
        setPage(prevPage => prevPage + 1);
      })
      .catch((error) => console.error(error));
  }
}, [page]); // 依赖page，状态变化时触发

方案2：用局部变量固定初始值，结合函数式更新

如果不想拆分函数，可以在search里定义一个局部变量保存初始的page值（0），同时在更新状态时用函数式写法获取最新状态，避免依赖闭包的旧值：

const search = async () => {
  const initialPage = 0;
  setData([]);
  setPage(initialPage);
  
  console.log("Page: " + initialPage); // 直接用局部变量，肯定输出0

  fetch(url)
    .then((response) => response.json())
    .then((json) => {
      // 函数式更新data，确保拿到最新的数组
      setData(prevData => prevData.concat(json.content));
      // 函数式更新page，基于当前最新的状态加1（此时page已经是0了）
      setPage(prevPage => prevPage + 1);
    })
    .catch((error) => console.error(error));
};

关键注意点 #

• 永远记住：React的状态更新是异步的，不要在调用setState后立刻依赖该状态的值做后续操作。
• 当需要基于当前状态更新新状态时，一定要用函数式更新（比如setPage(prevPage => prevPage + 1)），这样能确保拿到最新的状态值，避免闭包陷阱。

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