useState 获取所有项目属性总计

Question

我将添加到购物车的一系列产品存储在

useState

中，每个购物车产品都有一个可以增加和减少的数量，一切正常。

然后我想显示购物篮中所有产品数量的总数。基本上（产品 1 的数量为 2）+（产品 1 的数量为 3）= 总量 5。

我想我已经用下面的代码得到了答案：

const [cartQuantity, setCartQuantity] = useState(0)

const updateCartTotals = () => {
  let TotalQuantity = 1;
  cartProducts.map(({productQuantity}) => TotalQuantity = TotalQuantity + productQuantity)
  setCartQuantity(TotalQuantity)
}

当我在创建的每个“添加到购物车”函数运行后运行此函数时，它实际上会将购物车的产品总数更新为与添加到购物车的产品数量相匹配的正确数字：

如果我增加每件商品的数量，它也会更新：

但是，如果我减少数量，它仍然会增加 1（总共应该是 5，但显示为 7）

然后，如果我再减少一个，总量确实会减少，但现在比当时应该的数量少了一个，我不知道为什么。

我知道我正在构建一些以前没有的东西，并且使用 React 工作，我也刚刚习惯了，但我一直感觉很愚蠢，因为我接近问题的答案，但后来我不断发现存在问题我无法思考。因此，任何帮助将不胜感激。

谢谢

Answer 1

这不应该是一个单独的状态。您可以直接从其他状态计算它。这将使他们不可能不同步。

//const [cartQuantity, setCartQuantity] = useState(0)
let cartQuantity = 0;
cartProducts.forEach(({ productQuantity }) => cartQuantity = cartQuantity + productQuantity);

如果您担心此计算是费用（我不担心），您可以将其包装在

useMemo

const cartQuantity = useMemo(() => {
  let sum = 0;
  cartProducts.forEach(({ productQuantity }) => sum = sum + productQuantity);
  return sum;
}, [cartProducts])