javascript - 为什么我从减速器功能收到“NaN”？

Question

我正在添加购物车中的数量。我使用钩子 useSelector 将状态从我的 redux 状态中拉出，用于我的购物车中的所有项目，并使用 reduce 将所有数量相加并将它们显示在我的购物车图标中。

const cartItems = useSelector( (state) => state.cart.cartItems)
const itemCount = cartItems.reduce((accumulatedQuantity, cartItem) => 
  accumulatedQuantity + cartItem.quantity, 0

)

console.log(itemCount)

这里的项目数是“NaN”

我的 redux 购物车状态

标签： javascriptreactjsredux

Answer 1

可能对于某些 cartItem，数量不是数字。您可以检查 if isNaN() 然后将 cartItem.quantity 添加到累加器中。像这样，

const cartItems = useSelector( (state) => state.cart.cartItems)
const itemCount = cartItems.reduce((accumulatedQuantity, cartItem) => 
{
   if(isNaN(cartItem.quantity)) {
        return accumulatedQuantity;
   }
   return accumulatedQuantity + cartItem.quantity;
}, 0

)

console.log(itemCount)