0

introducir la descripción de la imagen aquí Buenas tardes, Me gustarias guardar este componente en el localStorage claro esta con toda su informacion pintada, intente guardarla con: localStorage.setItem("accessToken", JSON.stringify( data.data )), me la guarda pero se pierde el componente no se como hacer.

const onClickModal = (item) => {
    const exists = carrito.filter(i => i.product_id === item.product_id).length > 0
    if (!exists) {
        saveCarrito(carrito.concat({...item, quantity: 1, data}))
        setData([])
    } 
}

const modifyQuantity = (product_id, qty) => {
    const newCart = carrito.map(i => {
        if (i.product_id === product_id) {
            return { ...i, quantity: i.quantity + qty }
        }
        return i;
    })
    const cartWithoutZeros = newCart.filter(i => i.quantity !== 0)
    saveCarrito(cartWithoutZeros)
}

Cada ves que hago un onlClick filtro primero que exista esa orden para que no la pinte luego la mando al Hook de carrito y la concateno con el parametro quantity, para modificarlo con la otra funcion que esta ahi, quisiera saber como hacer persistir esos componentes iterados, aqui esta cuando los pinto

const itemsCarro = carrito.map((itemcarrito) => {
    return (
        <ItemCarro
            key={itemcarrito.product_id}
            item={itemcarrito}
            modifyQuantity={modifyQuantity}
            carrito={carrito} 
        />
    )
})
2
  • En cuanto a tu pregunta, puedo recomendarte el hook Context que tiene React, te permitirá persistir los datos en un estado o contexto a través de todos tus componentes, y es muy simple de utilizar: Context Lo bueno es que puedes retornar objetos en el contexto para cambiar el estado y así tu componente se podría renderizar nuevamente. Si requires mas ayuda con la implementación de este hook aquí estamos para ayudarte.
    – Danielnr
    Commented el 22 ene. 2021 a las 23:25
  • Muchas gracias amigo veré si lo puedo implementar y te comento que resulta muchas gracias. Commented el 23 ene. 2021 a las 2:32

1 respuesta 1

0

El error está en que con return { ...i, quantity: i.quantity + qty } devuelves el elemento modificado, pero no devuelves nada cuando no se cumple la condición. Modifica solo la cantidad cuando se cumpla la condición y siempre devuelve el elemento:

const modifyQuantity = (product_id, qty) => {
    const newCart = carrito.map(i => {
        if (i.product_id === product_id) {
            // Incrementas la cantidad
            i.quantity += qty;
        }
        // Devuelves el elemento
        return i;
    })
    const cartWithoutZeros = newCart.filter(i => i.quantity !== 0)
    saveCarrito(cartWithoutZeros)
}

Con tu código actual, solo agregando el return i; se soluciona:

const arr = [
    {id: 1, qty:3 },
    {id: 2, qty:3 },
    {id: 3, qty:3 },
    {id: 4, qty:3 },
];
function sumar(id, qty) {
    const newArr = arr.map(i => {
        if(i.id == id) {
            return {...i, qty: i.qty + qty };
        }
        // Te falta este return
        return i;
    });
    return newArr;
}

console.log(sumar(2, 2));

1
  • Muchas gracias amigo revisaré y te comento a ver cómo me va, muchas gracias 🙏 Commented el 23 ene. 2021 a las 2:31

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.