更新 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 有下划線，我認為這導致了問題）。 謝謝大家回復！