Tengo un problema cuando envío una acción que activa mi tipo ADD_TO_CART. Quiero aumentar la cantidad de un número específico agregado en el carrito cuando el usuario hace clic en él. Los números que obtengo para la cantidad son: 1, 3, 5, 7, 9... Pero deben incrementarse solo en 1 como 1, 2, 3, 4, 5. ¿Por qué obtengo incrementos dobles en mi instrucción if? cuando quiero actualizar el estado indirectamente sin mutarlo? Cualquier tipo de ayuda es muy apreciada.
Aquí está mi código:
switch(action.type){ case 'ADD_TO_CART': let tempCart = [...state.cart]; let specificIndex = state.cart.findIndex((obj) => obj.id === action.item.id); if(specificIndex >= 0){ tempCart[specificIndex].quantity +=1; // it should increment only by 1 and not by 2 tempCart[specificIndex].price += action.item.price; return{ ...state, cart : tempCart, } }Y aquí está mi estado para el ejemplo anterior:
export const initialState = { cart: [], };Sospecho que esto se debe a que está tratando a tempCart como mutable (agregando a sus miembros directamente), cuando en realidad es solo una referencia ( no una copia de) parte del state , que siempre debe tratarse como inmutable . En su lugar, intente algo como lo siguiente:
switch (action.type) { case "ADD_TO_CART": let specificIndex = state.cart.findIndex( (obj) => obj.id === action.item.id ); if (specificIndex >= 0) { return { ...state, cart: state.cart.map((item, idx) => idx == specificIndex ? { ...item, quantity: item.quantity + 1, price: item.price + action.item.price, } : item ), }; } }Consulte Patrones de actualización inmutables para obtener más información. Tenga en cuenta que, incluso en este pequeño ejemplo, este tipo de actualizaciones pueden volverse difíciles de manejar rápidamente. Hay bibliotecas de ayuda disponibles que pueden simplificar el proceso, si así lo desea.