React中useState更新后调用API传递旧count值问题求助

React的setState是异步批量更新机制，调用setCount后，当前函数作用域内的count变量并不会立刻更新为新值。你在onClick回调里先调用setCount，紧接着就用count作为参数传给fetchCalculatedService，这时候用的还是触发点击时的旧count值，所以服务器收到的是更新前的数值。

至于你打印时看到count是最新值，应该是在组件重新渲染后（比如组件的渲染函数里、或者依赖count的useEffect里）打印的，这时候状态已经完成更新，自然能拿到新值，但API调用是在更新前的闭包里执行的，两者不是同一个时机。

有两种常用的解决方式，根据你的场景选择：

方式一：直接计算新值并传递 #

既然新的count是基于旧值加1，你可以先算出新值，同时用来更新状态和调用API，完全不需要依赖setState的异步更新结果：

<IconButton
  color="success"
  disabled={!selectInsurance}
  onClick={() => {
    const newCount = count + 1;
    setCount(newCount);
    fetchCalculatedService(
      Date,
      Id,
      filter,
      Time,
      newCount
    );
  }}
>
  <ArrowUpward />
</IconButton>

方式二：监听状态变化触发API #

如果你的场景更复杂（比如count的更新逻辑不是简单加1，或者需要确保状态更新完成后再调用API），可以用useEffect监听count的变化，当count更新后自动调用API：

const { fetchCalculatedService, response } = useCalcService();
const [count, setCount] = React.useState(0);

// 监听count变化，更新后调用API
React.useEffect(() => {
  // 跳过初始化时的count=0（如果不需要初始调用的话）
  if (count === 0) return;
  fetchCalculatedService(Date, Id, filter, Time, count);
}, [count, fetchCalculatedService, Date, Id, filter, Time]);

<IconButton
  color="success"
  disabled={!selectInsurance}
  onClick={() => {
    setCount((prev) => prev + 1);
  }}
>
  <ArrowUpward />
</IconButton>

注意：第二种方式要把所有依赖项（fetchCalculatedService、Date等）都加到useEffect的依赖数组里，避免闭包导致的旧值问题。

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