更新 Redux 购物车中的商品数量

Question

我正在寻求帮助，因为我是 javascript 的新手。我的问题有类似的解决方案，但我仍然无法正常工作。 我正在尝试创建一个 redux 商店，其中有一个选项可以更新购物车中的数量。

这是我的商店

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    products: [],
    quantity: 0,
  },
  reducers: {
    addProduct: (state, { payload }) => {
      const product = state.products.find(
        (product) => product.id === payload.id
      );
       if (product) {
        state = state.products.map((product) =>
          product.id === payload.id
            ? {
                ...product,
                quantity: (product.quantity += payload.quantity),
              }
            : product
        );
      } else {
        state.products.push(payload);
        state.quantity += 1;
      }
    },
    incQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload);
      product.quantity++;
    },
    decQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload);
      if (product.quantity === 1) {
        const index = state.products.findIndex(
          (product) => product.id === payload
        );
        state.products.splice(index, 1);
      } else {
        product.quantity--;
      }
    },
    removeProduct: (state, { payload }) => {
      const index = state.products.findIndex(
        (product) => product.id === payload
      );
      state.products.splice(index, 1);
    },
  },
});

export const { addProduct, incQuantity, decQuantity, removeProduct } =
  cartSlice.actions;

export default cartSlice.reducer;

这就是我在产品页面上更新数量的方式，您可以在其中将产品添加到购物车

const handleQuantity = (type) => {
  if (type === "dec") {
    quantity > 1 && setQuantity(quantity - 1);
  } else {
    setQuantity(quantity + 1);
  }
};

<Remove onClick={() => handleQuantity("dec")} />
<span className="product-detail-amount">{quantity}</span>
<Add onClick={() => handleQuantity("inc")} />

<button className="product-detail-button"
onClick={() => dispatch(addProduct({ ...product, quantity }))}>
Add to Cart </button>

<Remove
  onClick={() => dispatch(decQuantity(product.id))}/>
  <span className="product-detail-amount">
  {product.quantity}</span>
 <Add
  onClick={() => dispatch(incQuantity(product.id))}/>

它现在所做的是在不显示新产品的情况下不断向同一产品添加数量，更新数量也存在同样的问题（它只更改第一个产品的数量，当它消失时它开始更新另一个）

非常感谢您的帮助！

Answer 1

我认为问题出在您将产品 ID 与整个有效负载进行比较的 incQuantity 和 decQuantity 减速器中。

不应该是 payload.id 吗？ 像这样

incQuantity: (state, { payload }) => {
      const product = state.products.find((product) => product.id === payload.id);
      product.quantity++;
},

Answer 2

我不相信 product.quantity++ 正在更新 state，它只是在更新 reducer 中的局部变量。

我很努力，但这行得通吗？

incQuantity: (state, { payload }) => {
  state.products[state.products.findIndex(el => el.id === payload)].quantity = payload;
},

编辑：

有点迷路了。 我相信你希望它增加 1：++

state.products[state.products.findIndex(el => el.id === payload)].quantity++

Answer 3

我明白了问题所在，原始代码有效，应该使用 _id 而不是 id（我从 mongodb 提取数据，其中 id 有下划线，我认为这导致了问题）。 谢谢大家回复！