React中select选项切换时如何避免价格错误重复累加

问题根因 #

现有逻辑的核心错误是切换子选项时没有以基础商品价格为计算基准，直接在上一次计算出的总价结果上叠加新子项价格，同时useEffect闭包捕获的旧状态值也会加剧计算错误：

• 初始状态price为基础价1，第一次选价格1的子项时，1+1=2计算暂时符合预期
• 切换第二个价格1的子项时，代码读取到的当前price是已经计算过的2，直接累加新子项价格1，得到错误结果3，全程没有重置回基础价的步骤

涉及的子项数据结构：
{name: 'name1', price: 1}、{name: 'name2', price: 1}

原问题代码：

const [price, setPrice] = useState(item.price)

  useEffect(() => {
    if (optionSelected === 'option') {
      setPrice(item.price)
    } else if (!isEmpty(optionSelected)) {
      setPrice(price + optionSelected.price)
    }
  }, [optionSelected])

修复方案 #

方案1：修正计算逻辑，永远以基础价为基准累加 #

每次选项变化时，先把总价重置为基础商品价格，再判断是否需要叠加当前选中子项的价格，从根源上避免连续累加：

const [price, setPrice] = useState(item.price)

useEffect(() => {
  // 初始化总价为基础价，切断和上一次计算结果的关联
  let currentTotal = item.price
  if (optionSelected !== 'option' && !isEmpty(optionSelected)) {
    currentTotal += optionSelected.price
  }
  setPrice(currentTotal)
// 记得把item.price加入依赖数组，避免基础价变化时不更新
}, [optionSelected, item.price])

方案2：移除冗余状态，直接计算派生总价 #

总价属于完全可以由基础价、当前选中项推导出来的派生值，不需要单独用useState+useEffect维护，直接在渲染阶段计算即可，彻底避免状态同步带来的bug：

const [optionSelected, setOptionSelected] = useState('option')
// 状态变化时自动重算总价，无需手动触发更新
const price = item.price + (
  optionSelected !== 'option' && !isEmpty(optionSelected) 
    ? optionSelected.price 
    : 0
)

注意：所有涉及“基础值+动态选中项”的价格计算场景，都不要用“在上次结果上累加”的逻辑，永远从原始基础值出发计算，能避免90%以上的价格计算错误。

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