0

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.

1 respuesta 1

0

Podrias probar sacar el addProductToCart(tempCartProduct) fuera del map. Algo así:

const prods = 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,
    };

    return tempCartProduct 
});

addProductToCart(prods);

La idea sería mapear la lista de productos en una lista de objetos tempCartProduct con el formato que quieres y que esa lista sea la que se agrega con la función addProductToCart.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.