React useState 导致复选框回调if-else总价更新逻辑仅执行if分支的问题

分支永远不触发的问题，和setTotalPrice的调用位置、执行逻辑没有任何关系，本质是两个代码疏漏导致的：

• 自始至终没有同步维护addOnContainer数组的内容
  全部判断逻辑以addOnContainer.includes(addOnName)为依据，但整个selectAddOn函数内，既没有把新选中的addOnName添加到数组中，也没有把已选中的addOnName从数组中移除。这就导致从组件初始化开始，addOnContainer永远是初始值（通常为空数组），判断条件!addOnContainer.includes(addOnName)永远为真，只会持续执行if分支逻辑，else分支永远没有触发的可能。
• 对问题触发时机的判断存在偏差
  之所以会觉得“引入setTotalPrice才导致逻辑失效”，是因为未调用setTotalPrice时，组件不会触发重渲染，调试时手动在控制台修改的addOnContainer内容可以临时生效，能正常走通两个分支的逻辑；只要调用setTotalPrice触发组件重渲染，以普通变量定义的addOnContainer就会被重置回初始值，每次判断时数组永远为空，else分支自然再也无法触发。
  之前尝试将setTotalPrice移出if-else分支仍未解决问题，就是因为核心判断依据addOnContainer本身没有做动态更新，和setTotalPrice的位置没有关联。

要让逻辑正常运行，必须把随用户操作动态变化的判断依据addOnContainer也通过useState管控，同时用函数式更新的方式修改状态，避免闭包捕获旧值导致的状态不同步，参考代码如下：

const [totalPrice, setTotalPrice] = useState(200)
// 将addOnContainer纳入useState管理，避免重渲染时值被重置
const [addOnContainer, setAddOnContainer] = useState([])

function selectAddOn(addOnName, addOnPrice) {
  const isAdded = addOnContainer.includes(addOnName)

  if (isAdded) {
    // 已选中：扣减总价，同时将当前附加项从数组移除
    setTotalPrice(prevPrice => prevPrice - addOnPrice)
    setAddOnContainer(prevList => prevList.filter(item => item !== addOnName))
  } else {
    // 未选中：累加总价，同时将当前附加项加入数组
    setTotalPrice(prevPrice => prevPrice + addOnPrice)
    setAddOnContainer(prevList => [...prevList, addOnName])
  }
}

注意：不要将addOnContainer定义为组件外的全局变量、或组件内的普通let/const变量，这类变量的值会在组件每次重渲染时被重置，无法保留用户操作后的最新状态。

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