Tengo un objeto de cart . Quiero cambiar la qty de un producto en el carrito para el cual he creado un método changeQty dentro del cual estoy usando el método de filter para encontrar el producto respectivo y luego estoy actualizando la qty .
Si paso distinto de 0 funciona correctamente. Pero si paso 0 como cantidad al método changeQty , el producto se elimina del carrito.
Según mi conocimiento, el filter funciona en función del valor de retorno. Pero aquí estoy asignando qty a product.qty . Y también, si uso el map en lugar del filter , obtengo 0 en lugar de ese producto. Entonces, mi duda es ¿qué devuelve product.qty = qty ?
let cart = [{ id: 1, title: "Product 1", qty: 1 }, { id: 2, title: "Product 2", qty: 1 }, ] const changeQty = (pid, qty) => { cart = cart.filter(product => product.id === pid ? product.qty = qty : product) console.log(cart); } changeQty(1, 0)Utilice el map en lugar del filter . Puede usar la sintaxis extendida y sobrescribir el valor de qty para el producto que coincide con el id .
let cart = [{ id: 1, title: "Product 1", qty: 1 }, { id: 2, title: "Product 2", qty: 1 }, ] const changeQty = (pid, qty) => { cart = cart.map(product => product.id === pid ? { ...product, qty } : product) console.log(cart); } changeQty(1, 0)si paso 0 como cantidad al método changeQty el producto se elimina del carrito.
Esto se debe a que la asignación de 0 a product.qty se evalúa como un valor de retorno de 0 para la devolución de llamada del filter . Ese es un valor falso, lo que indica que el artículo del carrito actual debe filtrarse. De hecho, no desea filtrar en absoluto. Por el contrario, no desea cambiar la longitud de la matriz del cart .
Si su objetivo es mutar la estructura del carrito, entonces posiblemente esté buscando find en lugar de filter :
const cart = [{id:1,title:"Product 1",qty:1},{id:2,title:"Product 2",qty:1}]; const changeQty = (pid, qty) => { Object(cart.find(({id}) => id === pid)).qty = qty; console.log(cart); } changeQty(1, 0); NB: la llamada a Object es para tratar en silencio con un producto que no está en el carrito.
Estás modificando el objeto fuente que es muy malo:
let cart = [{ id: 1, title: "Product 1", qty: 1 }, { id: 2, title: "Product 2", qty: 1 }, ] const changeQty = (pid, qty) => { cart.forEach(product => product.id === pid ? product.qty = qty : product) console.log(cart); } changeQty(1, 0)Es por eso que está obteniendo resultados inesperados.