React中如何在同一函数内调用setState后立即使用更新后的状态值？

React 中useState返回的更新函数是异步批处理的，调用更新方法后，当前同步代码块里的状态变量还是旧值，要等组件重渲染之后才会拿到最新结果。
你现在的代码里，调用setValue之后立刻读取value变量，拿到的还是更新前的初始空值，所以第一次点击时after字段是空的；等第二次点击时，第一次的value已经更新完成，才会显示出上一次计算的结果，表现就是点一次不对、点第二次才正常。
不要用加时间间隔等待状态更新的写法，状态更新耗时不固定，这种写法稳定性极差，很容易出偶现bug。

优先用本地变量存计算结果（最简洁无副作用） #

你这里的新值是可以提前计算出来的，完全不需要等状态更新，先把计算结果存在本地常量里，同时传给两个状态更新函数即可，全程同步执行，没有任何时序问题：

const handleAddToHistory = (e) => {
  e.preventDefault();
  // 提前计算新值，存在本地作用域变量里
  const calculatedValue = (parseFloat(Object.values(data)) * fromTo).toFixed(2);
  setValue(calculatedValue);
  // 直接复用计算好的值，不用等状态刷新
  setHistory(prev => [
    ...prev,
    {
      date: new Date().toISOString().slice(0, 10),
      before: fromTo,
      after: calculatedValue,
    }
  ])
}

更新history这种数组类型的状态时，推荐用上面示例里的函数式更新写法，直接从prev参数取最新的历史状态，可以避免闭包缓存了旧history值导致新增记录被覆盖的问题。

必须依赖更新后状态时用useEffect监听 #

如果后续逻辑确实需要等状态更新完成、组件完成重渲染拿到最新状态值再执行，可以把关联逻辑放到useEffect里，监听对应状态的变化触发：

const handleAddToHistory = (e) => {
  e.preventDefault();
  const calculatedValue = (parseFloat(Object.values(data)) * fromTo).toFixed(2);
  setValue(calculatedValue);
}

// 监听value变化，更新完成后自动执行历史记录追加
useEffect(() => {
  // 过滤初始状态的空值，避免组件首次加载时误加记录
  if (!value) return;
  setHistory(prev => [
    ...prev,
    {
      date: new Date().toISOString().slice(0, 10),
      before: fromTo,
      after: value,
    }
  ])
}, [value, fromTo])

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