React同批次setState后如何获取最新状态值计算总和

不需要额外添加按钮触发求和计算。受React函数组件闭包特性+状态批处理机制限制，你无法在调用SetNum1的同一轮同步执行的calculate函数中，直接获取到更新后的num1状态值——同一事件回调内的所有setState会被批量合并，等回调执行完成后才会统一更新状态、触发重渲染，回调执行过程中拿到的state始终是更新前的旧值。

但你完全可以在不新增按钮的前提下，实现输入时实时求和的需求，下面是两种符合你要求的实现方案：

方案1：直接使用输入值计算（最符合「同一函数内完成更新+求和」要求） #

你在触发onChange事件时，已经能从事件对象里拿到当前输入框的最新值，不需要等state更新完成再反向取值。只需要在函数内先算出两个输入框的最新值，再基于这个值更新对应state和sum即可：

const calculate = (e) => {
  // 提前计算两个输入项的最新值
  const updatedNum1 = e.target.id === 'num1' ? e.target.value : num1;
  const updatedNum2 = e.target.id === 'num2' ? e.target.value : num2;

  // 更新对应输入项的state
  e.target.id === 'num1' && SetNum1(updatedNum1);
  e.target.id === 'num2' && setNum2(updatedNum2);

  // 直接用提前算好的最新值求和，不需要等state更新
  setSum(parseFloat(updatedNum1 || 0) + parseFloat(updatedNum2 || 0));
}

这个方案没有任何额外性能开销，逻辑完全收敛在calculate函数内，完全匹配你的需求。

方案2：移除冗余的sum状态（官方推荐最优实践） #

sum是完全可以由num1和num2直接计算得到的派生值，根本不需要单独作为state存储，从根源上避免多状态同步不一致的问题：

export default function Home() {
  const [num1 , SetNum1] = useState(0.0)
  const [num2 , setNum2] = useState(0.0)
  // 直接基于现有state计算sum，不需要单独存state、不需要手动setSum
  const sum = parseFloat(num1 || 0) + parseFloat(num2 || 0)


  const calculate = (e) => {
    switch(e.target.id){
      case 'num1':
        SetNum1(e.target.value)
        break;
      case 'num2':
        setNum2(e.target.value)
        break;
    }
    // 不需要额外写求和逻辑，num1/num2更新重渲染时sum会自动计算为最新值
  }

  return (
    <div>
      <form>
        <input type="number" className="form-control"  id="num1" value={num1} onChange={calculate}  />
        <input type="number" className="form-control"  id="num2" value={num2} onChange={calculate}  />
        Sum : {sum}
      </form>
    </div>
  )
}

注：React官方明确建议，所有可以通过现有props/state计算得到的值，都不应该单独定义为state，避免出现状态不同步的bug。

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