Necesito escribir dos funciones, una para actualizar carrito de compras con nuevos productos (reservas) y otra para quitar productos del carrito. Tengo muchos proveedores de productos, así que quiero dividir mi matriz de "carrito" en secciones como esta:
[ "supplier1": ["product0": {props}, "product1": {props}, "productN": {props}], "supplier2": ["product0": {props}, "product1": {props}, "productN": {props}], "supplierN": ["product0": {props}, "product1": {props}, "productN": {props}], ]
Puedo agregar con éxito proveedores a mi matriz de estado y también enviar productos a las matrices de proveedores.
cuando uso
setCart(cart)
la matriz del carrito se está actualizando, pero aún es una matriz antigua, por lo que React no volverá a procesar mi componente
Y en este caso
setCart([...cart])
la matriz del carrito simplemente se vacía
Así que aquí está el código para agregar nuevos productos.
const [cart, setCart] = useState([]) const addToCart = useCallback((options) => { //options.cart_section and options.reserve if(typeof cart[options.cart_section] === 'undefined'){ cart[options.cart_section] = [] } cart[options.cart_section].push(options.reserve) setCart([...cart]) }, [])
y codigo de retiro de productos del carrito
const removeFromCart = useCallback((options) => { let index = cart[options.cart_section].indexOf(options.reserve) - 1 cart[options.cart_section].splice(index,1) setCart([...cart]) })
Elimina el producto especificado pero React no vuelve a renderizar el componente (igual que en la función a continuación)
Lo siento por mi inglés y gracias por la ayuda.
[ { supplierName: 'supplie name 1', products: [ {name: 'product name 1'}, {name: 'product name 2'} ] }, { supplierName: 'supplie name 2', products: [ {name: 'product name 1'}, {name: 'product name 2'}] } ]
let tempCart = cart.map(object => ({...object}))
después de eso, puede enviar un nuevo proveedor o producto y, al final, debe actualizar su estado a través de setCart. Por aquí:
setCart(tempCart)
de esta manera, está actualizando su estado a través de setState y reaccionar tratará esta acción como (necesita DOM para actualizar), luego su componente se volverá a procesar