正在更新Redux购物车中的产品数量

Question

我刚开始使用react和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

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

不应该是payload.id？像这个

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

Answer 2

我不相信product.quantity++在更新状态，它只是在更新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有下划线，我认为这导致了问题(。感谢所有回复的人！