反应 - 无法增加数量/在购物车中添加多个项目

Question

I am facing an issue with shopping cart. Unable to increase quantity of existing item in cart or add another item. On button click the addToCart function executes which takes a product.

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);
    }
  };

I am getting only 1 quantity of product and if I add another product or increase quantity, it overwrites.

Answer 1

Your else logic is wrong. You want to update your item quantity from carItems, before you spread it. Change:

const updateCart = [...cartItems];
updateCart[index].quantity += 1;
setCartItems(updateCart);  

to

      cartItems[index].quantity += 1;
      const updateCart = [...cartItems];
      setCartItems(updateCart);  

Edit: See it in action below:

 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);

Answer 2

Your code should work, is quite good

• probably testing method failed
• problems were related to different parts of code

 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));

working example

Is good enough? Not for react

Replacing item [-line] in cart with a new object can be required in react when you're rendering cart using components. fe:

cartItems.map( item => <CartOrderLine key={item._id} data={item} /> )

<CartOrderLine /> with the same data object ref (mutated quantity prop only, not replaced) won't be rerendered!