React Hook状态取值滞后：平均计算器需两次点击Apply才更新结果

• React的状态更新是异步批处理机制，同一个执行流程里连续调用多个状态更新方法，代码里读取的状态值永远是当前渲染周期的旧值，读不到刚setState设置的新值。你在useEffect里的执行顺序是：第一步先调用setportfolioUsed把最新的总仓位算出来存到状态，第二步立刻读取当前代码作用域里的portfolioUsed旧值去算平均价——这时候React还没完成重新渲染，portfolioUsed还是上一轮的旧值（比如初始的0），算出来的平均价肯定是错的。等第一次useEffect执行完，React才会应用新的portfolioUsed值，组件重新渲染，但因为update状态没再变化，useEffect不会重新执行。直到你第二次点Apply，update再次翻转，useEffect重新跑，这时候读到的portfolioUsed已经是第一次更新好的新值，算出来的结果才正确——这就是你必须点两次按钮才出结果的核心原因。
• 给setState加async/await完全无效：setState本身不是返回Promise的异步函数，await它不会等待状态更新完成，这也是你之前用async/await没解决问题的原因。
• 所有输入框拿到的e.target.value是字符串类型，不转成数字直接参与运算会出现隐式类型转换bug，比如字符串拼接代替加法、非预期的运算结果。
• 你设计的update状态用来手动触发useEffect执行的逻辑本身没有问题，但因为状态读取的时序错误，才导致了两次点击才出结果的问题。

最优改法（去掉冗余状态，实现实时计算） #

不需要把portfolioUsed和avgPrice存在state里，直接在组件渲染时根据当前的价格、百分比状态派生计算结果即可——只要输入值的state更新，组件自动重渲染，计算结果自动同步，根本不需要手动点Apply，也不存在状态读取时序的问题：

// 删掉 portfolioUsed、avgPrice、update 这三个state
// 把计算逻辑直接写在渲染环节，所有输入值转数字再运算
const priceValues = [Number(price1), Number(price2), Number(price3), Number(price4)]
const percentageValues = [Number(percentage1), Number(percentage2), Number(percentage3), Number(percentage4)]

const totalPortfolio = priceValues.reduce((sum, price, index) => {
  return sum + (price > 0 ? percentageValues[index] : 0)
}, 0)

const totalCost = priceValues.reduce((sum, price, index) => {
  return sum + price * percentageValues[index]
}, 0)

const avgPrice = totalPortfolio === 0 ? 0 : totalCost / totalPortfolio

页面上展示的内容直接用这两个派生值：

<p>{totalPortfolio > 4 ? "Your portfolio percentage selection is wrong" : "Average Price: " + avgPrice}</p>

原来的Apply按钮可以直接删掉，输入时结果自动更新。

如果一定要保留Apply按钮的交互（点击后才更新结果） #

把计算逻辑从useEffect里移到Apply的点击事件里，所有最新值在事件触发时同步转成数字计算，避免跨周期读旧状态的问题：

// 删掉update这个state，useEffect也不需要写了
const handleApply = () => {
  // 事件触发时，读取最新的输入值，转数字计算
  const p1 = Number(price1), p2 = Number(price2), p3 = Number(price3), p4 = Number(price4)
  const perc1 = Number(percentage1), perc2 = Number(percentage2), perc3 = Number(percentage3), perc4 = Number(percentage4)

  const totalUsed = (p1 > 0 ? perc1 : 0) + (p2 > 0 ? perc2 : 0) + (p3 > 0 ? perc3 : 0) + (p4 > 0 ? perc4 : 0)
  const avg = totalUsed === 0 ? 0 : (p1 * perc1 + p2 * perc2 + p3 * perc3 + p4 * perc4) / totalUsed

  // 一次性更新两个结果状态
  setportfolioUsed(totalUsed)
  setAvgPrice(avg)
}

按钮的onChange直接绑定这个handleApply方法，不需要再翻转update状态触发useEffect。

• 输入框的onChange事件里，拿到的值默认是字符串，必须用Number()或者parseFloat()转成数字再存到state里，不然哪怕解决了两次点击的问题，计算结果也会因为字符串类型出错。
• 不要给setState加async/await，这个API没有可以等待的Promise返回值，不会帮你解决状态读取时序的问题。

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