Tengo el siguiente objeto:
const initialState = { cart: { products: [] }, numberOfItems: 0}
En la siguiente función, quiero reemplazar la cantidad de uno de los productos en la matriz de productos.
"newItems" es el objeto que contiene la cantidad modificada.
on(increaseItemQuantity, (state, action) => { const newItems = increaseQuantity(state, action.itemId, action.size); const newState = { ...state, ...state.cart, products: [...newItems] } return newState; }),Espero que la matriz de productos dentro del carrito contenga un objeto con la nueva cantidad, en su lugar, se crea una nueva matriz de productos dentro del estado.
El carrito de inicio se ve así:
{ cart: products: [ {quantity: 9, size: 'XX-Large', _id: '61814f61efae17ff8c7d7a2c'}, {quantity: 1, size: 'Medium', _id: '618152d8fe84f566364585f0'} ] }Quiero que el artículo que muestra la cantidad 9 se reemplace por el que muestra la cantidad 10 a continuación:
{ cart: products: [ {quantity: 10, size: 'XX-Large', _id: '61814f61efae17ff8c7d7a2c'}, {quantity: 1, size: 'Medium', _id: '618152d8fe84f566364585f0'} ] }En su lugar, se agrega una matriz de productos adicional al estado nuevo como se muestra a continuación y el original en el carrito nunca se reemplaza:
newState cart: products: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}] _id: "617046de3eaaaa7221c1924e" products: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, Array(7)] const increaseQuantity = (state, itemId, size) => { console.log('state.cart.products', state.cart.products) const item = state.cart.products.find(item => item._id === itemId && item.size === size); const newItem = {...item}; ++newItem.quantity; let newItems = state.cart.products.filter(item => item._id !== itemId && item.size !== size); newItems.push(newItem); return newItems; }En lugar de buscar y filtrar, podría ser más fácil simplemente map sobre la matriz, y si la identificación del producto coincide con una identificación de búsqueda, actualice el valor de cantidad de ese objeto de producto y devuélvalo; de lo contrario, simplemente devuelva un objeto sin cambios.
A continuación, puede actualizar su estado. Esto crea un nuevo objeto de estado, conserva el estado anterior, agrega una nueva propiedad para el carrito, conserva las propiedades del carrito existente y luego agrega la nueva updatedArray a los products .
return { ...state, cart: { ...state.cart, products: updated } }; const state={cart:{products:[{quantity:9,size:"XX-Large",_id:"61814f61efae17ff8c7d7a2c"},{quantity:1,size:"Medium",_id:"618152d8fe84f566364585f0"}],anotherProp1:1,anotherProp2:2}}; function updateItem(state, id) { const { products } = state.cart; const updated = products.map(product => { if (product._id === id) { return { ...product, quantity: product.quantity + 1 }; } return product; }); return { ...state, cart: { ...state.cart, products: updated } }; } const id = '61814f61efae17ff8c7d7a2c'; const updatedState = updateItem(state, id); console.log(updatedState);