React中useState计算购物车商品总数量异常问题求助

你的代码里存在一个明显的错误：updateCartTotals函数中，TotalQuantity的初始值被设为了1，而正确的初始累加值应该是0。

这就是总数量始终和正确值相差1的原因——每次计算都会多加上一个初始的1。比如当所有商品数量总和是5时，你的代码会算出1+5=6，但实际应该是5；当总和减少到4时，代码算出1+4=5，而实际期望是4，刚好差1。

修正后的代码 #

把初始值改成0，同时更推荐用reduce来做累加（比map更语义化，效率也更高）：

const [cartQuantity, setCartQuantity] = useState(0)

const updateCartTotals = () => {
  const totalQuantity = cartProducts.reduce((sum, { productQuantity }) => sum + productQuantity, 0);
  setCartQuantity(totalQuantity);
}

为什么之前添加/增加数量时看似正确？ #

这只是巧合：比如你第一次添加的商品数量总和是2，1+2=3刚好和实际总数量一致；增加单个商品后总和变成5，1+5=6也刚好匹配你看到的结果。但这种巧合在减少数量时就会暴露问题，因为初始的1始终会被额外加上。

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