时间戳

首页 > 解决方案 > 为什么这段代码会删除 Redux 中的状态乘积？

reactjs - 为什么这段代码会删除 Redux 中的状态乘积？

问题描述

我有简单的代码

export default function asideReducer(state = initialState, action) {
  let cart = state.cart
  switch (action.type) {
    case ADD_TO_CART:
      let itemInCart = cart.find(item => item.product._id == action.payload.product._id)
      if(itemInCart)
      {
        let newQuantity = itemInCart.quantity;
        newQuantity++;
        return {
          ...state,
          cart: [{...itemInCart, quantity: newQuantity}]
        }
      } else{
        return {
          ...state,
          cart: [...state.cart, action.payload]
        }
      }
    default:
      return state
  }
}

我点击元素，如果在状态购物车中找不到项目，我简单地添加到状态购物车，但如果项目在购物车中，我添加数量。但是，如果我添加一些产品，在 2-3 次单击产品后从状态中删除。但是不存在删除产品的操作吗？我认为这可能是不正确的工作。

return {
          ...state,
          cart: [{...itemInCart, quantity: newQuantity}]
        }

标签： reactjsredux

解决方案

这一行实际上是擦除购物车中的所有其他物品：

cart: [{...itemInCart, quantity: newQuantity}]

相反，请考虑映射购物车并仅替换匹配项目的数量：

cart: state.cart.map(item => {
  return item !== itemInCart
    ? item
    : { ...itemInCart, quantity: newQuantity }
})

推荐阅读