如何处理React状态数组增删时的小计（subTotal）计算问题？

你的问题出在每次状态变化时都基于之前的subTotal累加当前所有项的值，这会导致删除对象时，之前累加的旧值还留在subTotal里，无法自动减去被删除项的数值。正确的做法是每次状态变化时重新计算整个数组的总和，而不是增量累加。

修正后的实现代码 #

useEffect(() => {
  // 用reduce计算所有项的value*unit总和
  const total = state.items.reduce((sum, item) => {
    return sum + item.unit * Number(item.value); // 注意：你原代码里的each.price对应对象结构里的value，需字段名匹配
  }, 0); // 初始值设为0，确保空数组时总和为0
  setSubtotal(total);
}, [state.items]); // 依赖项改为state.items更精准，避免不必要的重触发

为什么这个方法有效 #

• 不管是新增、删除还是修改数组内的对象，只要state.items发生变化，就会重新计算整个数组的总和，完全覆盖之前的subTotal值，从根源上避免了增量累加的错误。
• reduce是数组计算总和的标准方法，逻辑清晰，对于常规规模的数组来说性能足够。

额外注意点 #

• 你原代码里写的each.price和你给出的对象结构不匹配，要改成each.value才能正确取到数值。
• 依赖项尽量精准，用state.items替代整个state，只有数组本身变化时才触发计算，减少无意义的重渲染。

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