React如何非批量更新状态？Refresh函数重置后API调用异常解决

错误原因 #

React的useState状态更新是异步且批量执行的：在同一个事件循环中，状态更新不会立即同步到变量中，多次更新还会被合并。你在Refresh函数里先调用setPage(1)，紧接着调用getProducts，此时page变量仍然是更新前的旧值，导致API调用使用了错误的页码。

解决方案 #

方案1：给getProducts传递目标页码，脱离对当前状态的依赖

修改getProducts，让它支持接收自定义页码参数，调用时直接传入需要的数值：

const [page, setPage] = useState(1);

const getProducts = async (targetPage) => {
  // 优先使用传入的页码，没有则用当前状态的page
  const currentPage = targetPage ?? page;
  // 用currentPage执行API调用
  // ...
  // 更新页码时基于当前使用的数值+1
  setPage(currentPage + 1);
};

const Refresh = () => {
  // 刷新时直接传入页码1
  getProducts(1);
};

方案2：通过useEffect监听页码变化，自动触发API调用

将getProducts的触发逻辑绑定到page状态的变化上，Refresh只负责重置页码，useEffect会自动执行新的API请求：

import { useState, useEffect } from 'react';

const [page, setPage] = useState(1);

const getProducts = async () => {
  // 使用当前page状态执行API调用
  // ...
  // 用函数式更新保证获取最新状态值
  setPage(prevPage => prevPage + 1);
};

// 监听page变化，自动调用getProducts
useEffect(() => {
  getProducts();
}, [page]);

const Refresh = () => {
  // 只需重置页码，useEffect会触发新的请求
  setPage(1);
};

注：这种方式会在组件初始化时自动调用一次getProducts加载第一页数据，符合常规列表页面的需求。

补充：使用函数式更新保证状态更新的正确性

在更新页码时，尽量使用函数式更新（接收前一个状态值作为参数），避免因闭包捕获旧状态导致的更新错误：

// 错误示例：依赖当前page变量，可能捕获旧值
setPage(page + 1);

// 正确示例：函数式更新，获取最新的前状态
setPage(prevPage => prevPage + 1);

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