反應購物車突變問題

Question

我正在練習 React，開發一個商店，以添加我使用此示例的購物車的功能。

但是在我的實現中，即使我的版本幾乎相同，“ 添加到購物車”按鈕也不會區分每個產品，這意味着：

• 第一次單擊影響所有按鈕，不僅單擊的一個按鈕和其他按鈕更改為“添加更多”圖例
• 每次后點擊只會添加更多用戶第一次點擊的同類產品，如果點擊另一個則忽略。

似乎錯誤是由減速器 Function 中的突變引起的：

export const CartReducer = (state, action) => {
switch (action.type) {
    case 'ADD_ITEM':
      if (!state.cartItems.find((item) => item.id === action.payload.id)) {
        //-------HERE
        state.cartItems.push({
          //mutation here?
          ...action.payload,
          quantity: 1,
        });
        //-------
  }

  return {
    ...state,
    ...sumItems(state.cartItems),
    cartItems: [...state.cartItems],
  };

有什么替代方案？ 如何在沒有突變的情況下推送 state 中的項目？

完整的 te 文件在這里

在這里您可以檢查部署並復制錯誤，這里是正確的功能演示

Answer 1

您正在改變原始state ，這在 redux 中是不好的做法。 你可以做的是這樣的事情來防止它：

export const CartReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_ITEM':
            if (!state.cartItems.find((item) => item.id === action.payload.id)) {
                // If you have Lint problems with this declaration, you can set a variable before the switch
                const cartItems = [...state.cartItems, action.payload];

                return {
                    ...state,
                    ...sumItems(cartItems),
                    cartItems,
                };
            }

            return state;
    }
}

Answer 2

state.cartItems.push 在這里是錯誤的，您正在改變 state（反模式）。

首先你檢查你的項目是否存在，就像你在乞討時所做的那樣。 如果該項目存在，只需返回 state。 如果不是，您可以退回您的 state 為

return {
                    ...state,
                    ...sumItems(state.cartItems + 1),
                    cartItems: [...state.cartItems, action.payload],
                };

在詳細介紹和復雜的更新操作之前，您應該熟悉數組破壞、object 破壞、淺拷貝、擴展操作、復制 arrays、切片、拼接、過濾操作等主題。 否則你可能會像上面那樣執行一些直接變異。如果它們太復雜，你可以使用其他使操作更容易的庫，例如 immutable.js 但請記住，使用額外的庫會導致小的性能損失。

https://redux.js.org/recipes/using-immutablejs-with-redux