3 回答

TA貢獻1775條經驗 獲得超8個贊
您正在改變當前項。前/后遞減/遞減將改變它所操作的當前對象引用。
case types.ADD_TO_CART_SUCCESS:
const isAdded = state.cart.find(item => item.sku === action.product.sku);
if (!isAdded) action.product.qty = 1;
return {
...state,
cart: !isAdded
? [action.product, ...state.cart]
: state.cart.map(item =>
item.sku === action.product.sku
? { ...item, qty: ++item.qty } // <-- This mutates the current item.qty
: item
),
};
但是,您可以返回遞增的值,當前item.qty + 1
case types.ADD_TO_CART_SUCCESS:
const isAdded = state.cart.find(item => item.sku === action.product.sku);
if (!isAdded) action.product.qty = 1;
return {
...state,
cart: !isAdded
? [action.product, ...state.cart]
: state.cart.map(item =>
item.sku === action.product.sku
? { ...item, qty: item.qty + 1 }
: item
),
};
我懷疑您的代碼按預期運行,因為您確實正確替換了整個購物車數組,并且您變異的項目是您想要更新的項目,但這表明您的化簡器可能不是純函數,即在化簡器計算下一個狀態后,先前的狀態在所有方面仍應等于先前的狀態。

TA貢獻1780條經驗 獲得超4個贊
看起來您正在使用我們的官方 Redux Toolkit 包,默認情況下,該包將警告意外狀態突變。這很好,因為它顯然在這種情況下發現了一個突變。
但是,更好的是,Redux Toolkit在內部使用Immer來讓你在化簡器中編寫“變異”狀態更新!這意味著您的化簡器邏輯可以簡化為:
const cartSlice = createSlice({
name: 'cart',
initialState,
reducers: {
addToCartSuccess(state, action) {
const item = state.cart.find(item => item.sku === action.payload.product.sku);
if (item) {
item.qty++;
} else {
action.product.qty = 1;
state.cart.unshift(action.payload.product);
}
}
}
})

TA貢獻1827條經驗 獲得超8個贊
我做了幾次這樣的東西,試試這個代碼:
const addItemToCart = (cartItems, cartItemToAdd) => {
const existingCartItem = cartItems.find(
(cartItem) => cartItem.id === cartItemToAdd.id
);
if (existingCartItem) {
return cartItems.map((cartItem) =>
cartItem.id === cartItemToAdd.id
? { ...cartItem, quantity: cartItem.quantity + 1 }
: cartItem
);
}
return [...cartItems, { ...cartItemToAdd, quantity: 1 }];
};
添加回答
舉報