Reaguj - nie można zwiększyć ilości / dodać wielu pozycji do koszyka

Question

Mam problem z koszykiem. Nie można zwiększyć ilości istniejącego przedmiotu w koszyku ani dodać kolejnego przedmiotu. Po kliknięciu przycisku uruchamia się funkcja addToCart, która pobiera produkt.

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

Otrzymuję tylko 1 ilość produktu i jeśli dodam kolejny produkt lub zwiększę ilość, to nadpisuje.

javascript reactjs react-native shopping-cart

-1

Farhan Farooq 5 marzec 2020, 02:09

Answer 1

Twoja inna logika jest błędna. Chcesz zaktualizować ilość pozycji z carItems, zanim ją rozłożysz. Zmiana:

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

Do

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

Edycja: zobacz to w akcji poniżej:

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

0

Sunil Lama 4 marzec 2020, 23:49

Answer 2

Twój kod powinien działać, jest całkiem dobry

prawdopodobnie metoda testowania zawiodła
problemy były związane z różnymi częściami kodu

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

przykład pracy

Czy wystarczy? Nie na reakcję

Zastąpienie pozycji [-line] w koszyku nowym przedmiotem może być wymagane w reakcji na renderowanie koszyka przy użyciu komponentów. np .:

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

<CartOrderLine /> z tym samym odniesieniem obiektu data (tylko zmutowany atrybut quantity, nie zastąpiony) nie zostanie ponownie wyrenderowany!

0

xadm 5 marzec 2020, 10:33

Reaguj - nie można zwiększyć ilości / dodać wielu pozycji do koszyka

2 odpowiedzi

Twój kod powinien działać, jest całkiem dobry

Czy wystarczy? Nie na reakcję

Podobne pytania

Nowe pytania