Estoy trabajando en una aplicación de comercio electrónico utilizando React y estoy teniendo dificultades para agregar múltiples objetos a un estado utilizando el hook useState y useContext. En mi caso, tengo un estado llamado select que es un array de objetos. Mi objetivo es agregar varios productos seleccionados al carrito de compras a través del contexto utilizando la función addProductToCart
proporcionada por el contexto CartContext
.
Sin embargo, actualmente solo se almacena el último objeto del array en el carrito de compras, en lugar de todos los objetos seleccionados. Aquí está el código relevante:
const SetupPage = ({ products }) => {
const { addProductToCart } = useContext(CartContext);
const [select, setSelect] = useState([]);
// falta agregar items del select en el carrito de compras
const onAddProduct = () => {
const filteredProducts = select.filter(
(product) => product.inStock > 0
);
filteredProducts.map((product) => {
let priceWithDiscount =
product.price - product.price * (product.discount / 100);
let tempCartProduct = {
id: product.id,
description: product.description,
image: product.images,
price: product.discount > 0 ? priceWithDiscount : product.price,
slug: product.slug,
title: product.title,
inStock: product.inStock,
discount: product.discount,
quantity: 1,
};
addProductToCart(tempCartProduct);
});
};
return (
// JSX del componente...
)
};
La función addProductToCart
(solo estoy mostrando un ejemplo de todo lo que tiene el CartProvider):
const CART_INITIAL_STATE = {
isLoaded: false,
cart: [],
numberOfItems: 0,
subTotal: 0,
tax: 0,
total: 0,
shippingAddress: undefined,
};
const addProductToCart = (product) => {
const productInCart = state.cart.some((p) => p.id === product.id);
if (!productInCart)
return dispatch({
type: "[Cart] - Update products in cart",
payload: [...state.cart, product],
});
// Acumular
const updatedProducts = state.cart.map((p) => {
if (p.id !== product.id) return p;
// Actualizar la cantidad
p.quantity = product.quantity;
return p;
});
dispatch({
type: "[Cart] - Update products in cart",
payload: updatedProducts,
});
};
He intentado iterar sobre el arreglo filteredProducts y llamar a addProductToCart dentro de un .map()
para agregar cada producto al carrito de compras. Sin embargo, esto solo da como resultado que se almacene el último producto del arreglo.