如何在添加相同产品时将一个产品添加到购物车中

Question

我有一个购物车应用程序，可以添加或删除项目。使用Redux Toolkit实现

问题是，当您点击"添加"按钮时，我的购物车中添加了两个具有相同id的相同产品。按钮，购物车中有两张相同产品的卡，我需要一张卡，但他们的数量增加了。如何按id搜索匹配项，并根据匹配项增加数量或向购物车添加新产品?试图实现与forEach，但没有工作

const initialState = {
items: [],
totalQuantity: 0,
};
const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
addItemToCart: (state, action) => {
state.items.forEach((item) => {
if(item.id === action.payload.id) {
state.totalQuantity += 1;
return state.items
} else {
state.items.push(action.payload);
state.totalQuantity += 1;
}
})
},
removeItemFromCart: (state) => {
state.totalQuantity -= 1;
},
},
});

Answer 1

我最近做了一个与购物车相关的项目，我做了一些不同的事情，initialState必须是一个空数组，在数组中我们应该应用购物车的逻辑和quantity变量和查找方法扩展算子这样写:

const initialState = [];
const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
addItemToCart: (state, {payload}) => {
const {id} = payload;
const doesItemExist = state.find((item) => item.id === id);
if(doesItemExist){
return state.map((item) => {
if(item.id === id){
return {
...item,
quantity: item.quantity + 1
} 
}
return item;
})                    
} else {
state.push({
...payload, quantity: 1
})
}
}, 

remove reducer从add reducer中获取部分逻辑，但是减少了数量。

removeItemFromCart: (state, {payload}) => {
return state.map((item) => {
if(item.id === id){
return {
...item,
quantity: item.quantity - 1
} 
}
return item;
})
},
},
});