2

Estoy intentando eliminar un objeto de un array almacenado en localStorage con localStorage.removeItem(). He intentado realizar dicha acción de la siguiente forma:

Principalmente al añadir un ítem, tomo su id y lo envío a la función deleteProduct(), donde realiza un mapeo de los productos y retorna el objeto que incluye el id especificado, para posteriormente eliminarlo.

    const Cart = () => {
    const [products, setProducts] = useState([]);
    const [item, setItem] = useState();

    useEffect(() => {
        setProducts(JSON.parse(localStorage.getItem('data')))
    }, [])

    const deleteProduct = (id) => {
        products.map((product) => {
            if(products.includes(id)) {
                return product
            }
            setItem(product)
            console.log(item)
            localStorage.removeItem('data', item)
        })
    }

    return (
        <>
            <Container type={'min'}>
                <SVGContainer way={'way1'}>
                    <Way1 />
                </SVGContainer>
                <Header />
                <SubContainer type={'min'}>
                    <h1>Shopping Cart</h1>
                </SubContainer>
            </Container>

            <ContainerAll>
                <ProductsList>
                    {products.length > 0 && products.map((product) => {
                        return(
                            <Item key={product.id}>
                                <div>
                                    {/* <img src={product.picture} alt=""/> */}
                                </div>
                                <div>
                                    <h2>{product.name}</h2>
                                    <p>{product.description}</p>
                                </div>
                                <div>
                                    <p>Min price: ${product.minPrice}</p>
                                    <p>Max price: ${product.maxPrice}</p>
                                    <button onClick={() => deleteProduct(product.id)}>Delete</button>
                                </div>
                            </Item>
                        )
                    })
                    }
                </ProductsList>
            </ContainerAll>
        </>
    );
}
 
export default Cart;

2 respuestas 2

2

Parece haber un problema con la configuración de la función callback del método map, se puede usar el método filter para eliminar el id de products:

let newData = products.filter(item => item.id !== id)

Luego, con el nuevo array que regresa filter, se carga un nuevo valor para data en localStorage:

localStorage.setItem('data', JSON.stringify(newData));

Finalmente se carga un nuevo valor para el estado products:

setProducts(newData)

Quedaría algo así:

const onSelected = (id) => {

    let newData = products.filter(item => item.id !== id)
    console.log("newData",newData);
    localStorage.setItem('data', JSON.stringify(newData));
    setProducts(newData)

    /*
    products.map((product) => {
        if(products.includes(id)) {
            return product
        }
        setItem(product)
        console.log(item)
        localStorage.removeItem('data', item)
    })*/
}

Espero que esta respuesta sea de ayuda.

1
  • Muchas gracias, me funcionó Commented el 12 jun. 2021 a las 18:08
1

No es buena idea depender del valor de un estado recién seteado para obtener un dato que se necesita usar inmediatamente después.

Ese estado está desactualizado y en todo caso no eliminaría el dato correcto del localStorage.

Yo le haría varios cambios a tu código e intentaría hacer todo de una forma totalmente distinta.

En primer lugar, haría un cambio en el nombre que usas para hacer el .map de los productos. Ya que al llamarse products al igual que el estado, podría generar conflictos.

Así que le cambiaría el nombre a productRendering.

{products.length > 0 && products.map((productRendering) => {
                    return(
                        <Item key={productRendering.id}>

...

Luego cambiaría el argumento que le envías a la función para eliminar.

En vez de solo el Id, le enviaría todo el objeto.

<button onClick={() => deleteProduct(productRendering)}>Delete</button>

Ahora con ese dato, en la función para eliminar, en vez de eliminar el objeto directamente del localStorage lo eliminaría del array que tiene los productos así:

const deleteProduct = (productRendering) => {
      let index  = products.indexOf(productRendering)
      products.splice(index, 1)
      localStorage.setItem('data', JSON.stringify(products))
      setProducts(products)
    }
}

Lo que hago ahí sería buscar el índice que tiene el objeto a eliminar dentro del array que está en el estado products.

Con ese índice, mediante .splice elimino el objeto del array.

Después, actualizo el localStorage con el nuevo array actualizado.

Y finalmente actualizo el estado como corresponde con el setProducts() para que los cambios se reflejen en el DOM.

Haciendo las cosas de esa manera, el estado item y su función setItem ya no serían necesarios.

Con todas esas modificaciones, el código completo quedaría así:

    const Cart = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        setProducts(JSON.parse(localStorage.getItem('data')))
    }, [])

    const deleteProduct = (productRendering) => {
        let index  = products.indexOf(productRendering)
        products.splice(index, 1)
        localStorage.setItem('data', JSON.stringify(products))
        setProducts(products)
    }

    return (
        <>
            <Container type={'min'}>
                <SVGContainer way={'way1'}>
                    <Way1 />
                </SVGContainer>
                <Header />
                <SubContainer type={'min'}>
                    <h1>Shopping Cart</h1>
                </SubContainer>
            </Container>

            <ContainerAll>
                <ProductsList>
                    {products.length > 0 && products.map((productRendering) => {
                        return(
                            <Item key={productRendering.id}>
                                <div>
                                    {/* <img src={productRendering.picture} alt=""/> */}
                                </div>
                                <div>
                                    <h2>{productRendering.name}</h2>
                                    <p>{productRendering.description}</p>
                                </div>
                                <div>
                                    <p>Min price: ${productRendering.minPrice}</p>
                                    <p>Max price: ${productRendering.maxPrice}</p>
                                    <button onClick={() => deleteProduct(productRendering)}>Delete</button>
                                </div>
                            </Item>
                        )
                    })
                    }
                </ProductsList>
            </ContainerAll>
        </>
    );
}

export default Cart;

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.