0

Estoy dando mis primeros pasos en react y en la programacion en si, y para esto estoy haciendo un carrito de compras simple, el cual me permite ir agregando los productos que voy a comprar a un useState que inicia con un arreglo vacio. Los productos tambien los tengo en otro useState. Cuando agrego el producto mediante un boton que tiene la funcion agregarProductoCompra, esta me verifica si el producto ya esta en la lista y si es asi me incrementa la cantidad si no esta lo agrega. El problema es que cuando el producto ya esta me incrementa la cantidad bien pero tambien lo hace en los productos. De esto me doy por la extension de chrome components y porque cuando quito el producto de la lista de compra y lo vuelvo a poner me lo agrega pero ya esta vez con la cantidad que habia la ultima vez.

 import React, { useState } from "react";
    import { CrearListaProductos } from "./components/CrearListaProductos";
    import { ProductosListaCompra } from "./components/ProductosListaCompra";

        export const App = () => {
            // useState que me guarda los productos disponibles
            const [productos, setProductos] = useState([
            {
                id: 1,
                nombre: "Yuca",
                descripcion: "yuca x 1 lb",
                cantidad: 1,
                precio: 3000,
            },
            {
                id: 2,
                nombre: "Arroz",
                descripcion: "arroz x 1 lb",
                cantidad: 1,
                precio: 4000,
            },
        ]);
    
        // useState para guardar los productos que voy a comprar
        const [listaCompra, setListaCompra] = useState([]);
    
        //Funcion que me permite agregar productos al useState que tiene listaCompra
        const agregarProductoCompra = (id) => {
            if (listaCompra.filter((producto) => producto.id === id).length > 0) {
                const incrementarCantidad = listaCompra.map((producto) => {
                    if (producto.id === id) {
                        producto.cantidad++;
                        return producto;
                    } else {
                        return producto;
                    }
                });
    
                setListaCompra([...incrementarCantidad]);
            } else {
                const agregarNuevo = productos.filter((elemento) => elemento.id === id);
                setListaCompra([...listaCompra, ...agregarNuevo]);
            }
        };
    
        // Funcion para quitar productos de la lista de compras
        const quitarProducto = (id) => {
            const quitar = listaCompra.filter((p) => p.id !== id);
            setListaCompra([...quitar]);
        };
    
    
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-6 border border-2 border-danger">
                        <h1 className="text-center">Carrito de Compras</h1>
                    </div>
                </div>
    
                <div className="row border border-2 border-danger">
                    <div className="col-6 border border-info">
                        <div className="row">
                            {
                                productos.map((elemento) => (
                                    <CrearListaProductos
                                        key={elemento.id}
                                        elemento={elemento}
                                        agregarProductoCompra={agregarProductoCompra}
                                    />
                                ))
                            }
                        </div>
                    </div>
    
                    <div className="col-6">
                        <div className="row row-col-10 justify-content-center align-items-center text-center mt-2">
                            <h4 className="my-auto">Lista de Compras</h4>
                        </div>
    
                        {
                            listaCompra.map((elemento) => (
                                <ProductosListaCompra
                                    key={elemento.id}
                                    elemento={elemento}
                                    quitarProducto={quitarProducto}
                                />
                            ))
                        }
                    </div>
                </div>
            </div>
        );
    };

1 respuesta 1

1

Esto te sucede por que es un array de objetos, los cuales usan un espacio en memoria. Al hacer un filter, estas solo apuntando al mismo espacio de memoria de ese objeto, por lo cual tendrías 1 objeto con 2 referencias al mismo elemento. Para solucionarlo deberás crear un nuevo array de objetos de productos y con el agregar el nuevo producto.

//Funcion que me permite agregar productos al useState que tiene listaCompra
        const agregarProductoCompra = (id) => {
            if (listaCompra.filter((producto) => producto.id === id).length > 0) {
                const incrementarCantidad = listaCompra.map((producto) => {
                    if (producto.id === id) {
                        producto.cantidad++;
                        return producto;
                    } else {
                        return producto;
                    }
                });
    
                setListaCompra([...incrementarCantidad]);
            } else {
                const tempProd = productos.map(e => ({id: e.id, nombre: e.nombre, descripcion: e.descripcion, cantidad: e.cantidad, precio: e.precio});
                const agregarNuevo = tempProd.filter((elemento) => elemento.id === id);
                setListaCompra([...listaCompra, ...agregarNuevo]);
            }
        };

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.