为什么我从减速机 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)