為什么我從減速機 function 收到“NaN”？

Question

我正在添加購物車中的數量。 我使用鈎子 useSelector 將 state 從我的 redux state 拉出我的購物車中的所有物品，並使用 reduce 來添加所有數量並將它們顯示在我的購物車中。

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

)

console.log(itemCount)

這里的項目數是“NaN”

我的 redux 購物車 state

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)

Answer 2

似乎您的cartItem.quantity可能不是數字格式：試試這個：

const cartItems = useSelector( (state) => state.cart.cartItems)

const itemCount = cartItems.reduce((accumulatedQuantity, cartItem) => 
      accumulatedQuantity + Number(cartItem.quantity), 0)

console.log(itemCount)