如果商品已添加到 React 的购物车中,如何增加商品的数量
How to increase quantity of the item if it is already added in shopping cart in React
我遇到了购物车问题。无法增加购物车中现有商品的数量或添加其他商品。在按钮上单击 addToCart 函数执行,它需要一个产品。
const [cartItems, setCartItems] = useState([])
const addToCart = product => {
console.log(product) // here I am getting the entire product
const index = cartItems.findIndex(item => item._id === product._id);
if (index === -1) {
const updateCart = cartItems.concat({
...product,
quantity: 1
});
setCartItems(updateCart);
} else {
const updateCart = [...cartItems];
updateCart[index].quantity += 1;
setCartItems(updateCart);
}
};
我只收到 1 件产品,如果我添加其他产品或增加数量,它会覆盖。
你的else逻辑错误。你想在传播之前从 carItems 更新你的项目数量。
变化:
const updateCart = [...cartItems];
updateCart[index].quantity += 1;
setCartItems(updateCart);
到
cartItems[index].quantity += 1;
const updateCart = [...cartItems];
setCartItems(updateCart);
编辑:查看下面的实际操作:
let cartItems = [{
_id: "1",
name: "shoe",
quantity: 1
}];
const addToCart = product => {
console.log(product) // here I am getting the entire product
const index = cartItems.findIndex(item => item._id === product._id);
if (index === -1) {
cartItems.push({
...product,
quantity: 1
});
const updateCart = [...cartItems];
console.log(updateCart);
} else {
cartItems[index].quantity += 1;
const updateCart = [...cartItems];
console.log(updateCart);
}
};
var product1 = {
_id: "1",
name: "shoe"
};
var product2 = {
_id: "2",
name: "apple"
};
addToCart(product1);
addToCart(product2);
你的代码应该可以工作,非常好
- 可能测试方法失败
- 问题与代码的不同部分有关
let cartItems = [
{
_id: "1",
name: "shoe",
quantity: 1
}
];
console.log("START", JSON.stringify(cartItems), Array.isArray(cartItems));
const addToCart = product => {
console.log(product); // here I am getting the entire product
const index = cartItems.findIndex(item => item._id === product._id);
if (index === -1) {
const updateCart = cartItems.concat({
...product,
quantity: 1
});
cartItems = updateCart;
console.log("ADD", JSON.stringify(cartItems), Array.isArray(cartItems));
} else {
// original ... just works ...
// const updateCart = [...cartItems];
// updateCart[index].quantity += 1;
// ... this works, too
// cartItems[index].quantity += 1;
// const updateCart = [...cartItems];
// ... but this is safer (in react) as it replaces item with a new object
const updateCart = [...cartItems];
// new object for replace existing one
updateCart[index] = {
...updateCart[index],
quantity: updateCart[index].quantity + 1
};
cartItems = updateCart;
console.log("INC", JSON.stringify(cartItems), Array.isArray(cartItems));
}
};
var product1 = {
_id: "1",
name: "shoe"
};
var product2 = {
_id: "2",
name: "apple"
};
addToCart(product1);
addToCart(product2);
addToCart(product1);
console.log("END", JSON.stringify(cartItems), Array.isArray(cartItems));
够好吗?不适用于反应
当您使用组件渲染购物车时,可能需要用新对象替换购物车中的项目 [-line]。 f.e.:
cartItems.map( item => <CartOrderLine key={item._id} data={item} /> )
<CartOrderLine />
具有相同的 data
对象引用(仅变异的 quantity
属性,未被替换)将不会被重新渲染!
我遇到了购物车问题。无法增加购物车中现有商品的数量或添加其他商品。在按钮上单击 addToCart 函数执行,它需要一个产品。
const [cartItems, setCartItems] = useState([])
const addToCart = product => {
console.log(product) // here I am getting the entire product
const index = cartItems.findIndex(item => item._id === product._id);
if (index === -1) {
const updateCart = cartItems.concat({
...product,
quantity: 1
});
setCartItems(updateCart);
} else {
const updateCart = [...cartItems];
updateCart[index].quantity += 1;
setCartItems(updateCart);
}
};
我只收到 1 件产品,如果我添加其他产品或增加数量,它会覆盖。
你的else逻辑错误。你想在传播之前从 carItems 更新你的项目数量。 变化:
const updateCart = [...cartItems];
updateCart[index].quantity += 1;
setCartItems(updateCart);
到
cartItems[index].quantity += 1;
const updateCart = [...cartItems];
setCartItems(updateCart);
编辑:查看下面的实际操作:
let cartItems = [{
_id: "1",
name: "shoe",
quantity: 1
}];
const addToCart = product => {
console.log(product) // here I am getting the entire product
const index = cartItems.findIndex(item => item._id === product._id);
if (index === -1) {
cartItems.push({
...product,
quantity: 1
});
const updateCart = [...cartItems];
console.log(updateCart);
} else {
cartItems[index].quantity += 1;
const updateCart = [...cartItems];
console.log(updateCart);
}
};
var product1 = {
_id: "1",
name: "shoe"
};
var product2 = {
_id: "2",
name: "apple"
};
addToCart(product1);
addToCart(product2);
你的代码应该可以工作,非常好
- 可能测试方法失败
- 问题与代码的不同部分有关
let cartItems = [
{
_id: "1",
name: "shoe",
quantity: 1
}
];
console.log("START", JSON.stringify(cartItems), Array.isArray(cartItems));
const addToCart = product => {
console.log(product); // here I am getting the entire product
const index = cartItems.findIndex(item => item._id === product._id);
if (index === -1) {
const updateCart = cartItems.concat({
...product,
quantity: 1
});
cartItems = updateCart;
console.log("ADD", JSON.stringify(cartItems), Array.isArray(cartItems));
} else {
// original ... just works ...
// const updateCart = [...cartItems];
// updateCart[index].quantity += 1;
// ... this works, too
// cartItems[index].quantity += 1;
// const updateCart = [...cartItems];
// ... but this is safer (in react) as it replaces item with a new object
const updateCart = [...cartItems];
// new object for replace existing one
updateCart[index] = {
...updateCart[index],
quantity: updateCart[index].quantity + 1
};
cartItems = updateCart;
console.log("INC", JSON.stringify(cartItems), Array.isArray(cartItems));
}
};
var product1 = {
_id: "1",
name: "shoe"
};
var product2 = {
_id: "2",
name: "apple"
};
addToCart(product1);
addToCart(product2);
addToCart(product1);
console.log("END", JSON.stringify(cartItems), Array.isArray(cartItems));
够好吗?不适用于反应
当您使用组件渲染购物车时,可能需要用新对象替换购物车中的项目 [-line]。 f.e.:
cartItems.map( item => <CartOrderLine key={item._id} data={item} /> )
<CartOrderLine />
具有相同的 data
对象引用(仅变异的 quantity
属性,未被替换)将不会被重新渲染!