1

estoy creando una funcionalidad para agregar un producto al carro de compras (Este carro esta en un state centralizado con recoilJs) la cosa es que si voy a un producto y agrego mas cantidad o reduzco la cantidad de este una vez añadido al carro funciona correctamente, sin embargo, el problema ocurre cuando:

  1. Tengo productos A y B añadidos al carro
  2. Salgo de la vista de producto y vuelvo al producto A
  3. Añado otra cantidad del producto A
  4. Ocurre el problema -> añade dentro del array el producto A como nuevo el array pasa de 2 a 3 (A, B, A)

Mi codigo de la logica del carro es la siguiente:

    // React
    import React, { useEffect, useState } from 'react';

    // Components
    import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';

    // Recoil
    import { cart } from '../../store';
    import { useRecoilState, useResetRecoilState } from 'recoil';

    // Location state props
    import { useLocation } from "react-router-dom";

    // Style.sass
    import './style.sass';

    // Images
    const productImage = require('../../assets/images/product/product.png');

    const ProductPage = () => {


        const notify = () => {
            toast('🦄 Wow lo añadiste al carrito!', {
                position: "top-right",
                autoClose: 5000,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
            });
        }

        const [quantityItems, setQuantity] = useState(0);
        const [cartArray, setCart] = useRecoilState(cart);
        

        const location = useLocation();
        const { state: data } = location;
        const { data:product } = data;

        const addToCart = () => {

            if(cartArray.length < 1) {
        
                setCart((item) => [
                    ...item,
                    {
                        id: product.id,
                        title: product.title,
                        quantity: quantityItems
                    }
                ])
            } else {
            
                cartArray.map((cartItem) => {

                    if(cartItem.id === product.id) {
                        console.log('entra aqui I')
                        let newSetCart = cartArray.map((item) => {    
                            let cartItemCopy = {...item};
                            if(cartItemCopy.id === product.id) {
                                cartItemCopy.quantity = quantityItems;
                            }
                            return cartItemCopy;
                        
                        });

                        setCart(newSetCart);

                    } else if (cartItem.id !== product.id) {

                        console.log('entra II')
                        let newItem = {
                            id: product.id,
                            title: product.title,
                            quantity: quantityItems
                        }
                        setCart(cart => [...cartArray, newItem]);
                
                        // cartArray.map((item) => {
                        //     console.log('item id ', item.id)
                        //     let cartItemCopy = {...item};
                        //     if(item.id !== product.id) {
                        //         let newItem = {
                        //             id: product.id,
                        //             title: product.title,
                        //             quantity: quantityItems
                        //         }
                        //         setCart(cart => [...cartArray, newItem]);
                        //     }
                            
        
                        // })
                        
                    }
                })  
            }
            notify();
        }

        console.log(useRecoilState(cart));


        const setCountHandler = () => {
            setQuantity(quantityItems + 1);
        }

        

        const removeCountHandler = () => {
            if(quantityItems === 0) return;

            setQuantity(quantityItems - 1);
        }

        return(
            <div className="product-page-wrapper">
                <div className="column-product">

                    <div className="column-title-product-container">
                        <div className="title-and-price">
                            <div className="made-for-text">
                                <p>MADE FOR Aging Skin</p>
                            </div>
                            <div className="daily-mineral-title">
                                <h1>{product.title}</h1>
                                {/* <h1>Broad Spectrum</h1> */}
                            </div>
                            <div className="lower-text-title">
                                <p>Use if texture changes got you down and it's time to start anew.</p>
                            </div>
                            <div className="price">
                                <p>${product.price}</p>
                            </div>

                            <div className="amount-and-add-button-container">
                                <div className="quantity-button">
                                    <div className="negative-sign" onClick={removeCountHandler}><p>-</p></div>
                                    <div><p>{quantityItems}</p></div>
                                    <div className="positive-sign" onClick={setCountHandler}><p>+</p></div>
                                </div>

                                <div className="add-button" onClick={() => addToCart()}>
                                    <p>ADD TO BAG</p>
                                </div>

                                <ToastContainer />
                            </div>
                        </div>

                    </div>

                    <div className="product-image-container">
                        <div className="product-image">
                            <img src={product.image}></img>
                        </div>
                    </div>
                </div>

                <div className="column-description-product">
                    <div className="main-description-row">
                        <div className="description-container-container">
                            <h1>PRODUCT DESCRIPTION</h1>
                            <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu orci, consequat et eros id, laoreet consectetur dui. 
                            Curabitur ac risus placerat, fringilla tortor in, porta purus. Donec feugiat tincidunt scelerisque. Cras elit ante, tempor vel sem eget, placerat gravida eros. Nunc tortor justo, consequat nec imperdiet at, aliquet eu libero.
                            </p>
                        </div>

                        <div className="net-weight-container">
                            <p>Net wt: 17 fl.oz / 50ml</p>
                        </div>

                        <div className="adversory-container">
                            <p>Non-toxic</p>
                            <p>|</p>
                            <p>Vegan</p>
                        </div>
                    </div>
                </div>

            </div>
        );
    }



    export default ProductPage;

Como dato: Cuando aumento o disminuyo la cantidad de un producto lo filtro mediante un id del producto en el array vs el producto de la pagina que viene por props. Sin embargo no se me ocurre como evitar que no añada al producto si existe en el array.

1 respuesta 1

1

El problema se da porque ya estás recorriendo el arreglo con .map() y después vuelves a recorrerlo con esto:

if(cartItem.id === product.id) {
    console.log('entra aqui I')
    // No es necesario volver a recorrer
    /* Todo esto sobra *******
    let newSetCart = cartArray.map((item) => {
        // ¿Para qué creas una copia?
        let cartItemCopy = {...item};
        // Esto siempre será verdadero
        if(cartItemCopy.id === product.id) {
            cartItemCopy.quantity = quantityItems;
        }
        return cartItemCopy;
    });
    ********* */
    // Solo tienes que actualizar la cantidad
    item.quantity += quantityItems;
 }
 // Tampoco necesitas un else, solo devolver el elemento actual
 return item;

Se puede simplificar un poco más, sin necesidad de recorrer cada elemento del arreglo, solo tienes que buscar si el producto ya existe con .findIndex() que devuelve la posición en la que está (cero o mayor) o menos uno si no existe.

Si no existe, lo agregas al arreglo y, si ya existe, incrementas la cantidad.

    const addToCart = () => {
        // Crear nuevo arreglo
        // Desestructura para crear nuevo elemento en vez de referencia
        // Lo que te comentaba abajo, declarar la variable aparte arriba
        
        let newCart = [];
        cartArray.map(item => newCart.push({...item}));
        // Ver si el elemento ya existe
        index = newCart.findIndex(item => item.id == product.id);
        if(index < 0) {
            // El producto no está en el carrito, agregarlo
            newCart.push({
                id: product.id,
                title: product.title,
                quantity: quantityItems
            });
        } else {
            // El producto ya existe, actualizar cantidad
            newCart[index].quantity += quantityItems;
        }
        // Actualizar carrito
        setCart(cart => newCart);
        notify();
    }
5
  • Hola, gracias por contestar el hecho es que de igual manera en el "else" debo recorrer el cartArray para hacer una copia del objeto, de lo contrario no puedo actualizar el atributo quantity porque me retorna el error "only read". Supongo que para restar debere de pasar en la condicion si es suma o resta para hacer el mismo proceso quantity -= quantity. Ya que puede ser que el user añada al carro pero despues sin salir de la vista quiera eliminar 2 y actualizar el carro.
    – Richi
    Commented el 25 feb. 2022 a las 1:57
  • ¿La variable cartArray es solo lectura?, entonces se puede crear un nuevo arreglo donde se hagan las modificaciones y, al final, con setCart() se debería actualizar correctamente. Revisa la respuesta actualizada, a ver si te sirve.
    – Triby
    Commented el 25 feb. 2022 a las 15:25
  • hola!, no puedo descontruir el objeto almacenado en item desde el map, aun asi, si lo paso como item sin desconstruccion "Uncaught TypeError: "quantity" is read-only"
    – Richi
    Commented el 26 feb. 2022 a las 0:43
  • Perdona, no pude editar pero lo que puedo hacer para evitar el error que aparece y dejar de referenciar y hacer una copia del array es ----> deje editada la respuesta!
    – Richi
    Commented el 26 feb. 2022 a las 0:49
  • Gracias por la ayuda!!
    – Richi
    Commented el 26 feb. 2022 a las 0:51

Tu Respuesta

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

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