Estoy tratando de hacer una aplicación de comercio electrónico simple. Cuando un usuario va a la sección del carrito e intenta aumentar o disminuir la cantidad, cambia el estado pero permanece igual en la página. Necesito volver e ir al carrito nuevamente para actualizar. ¿Cómo puede cambiar dinámicamente?
function CardItem() { const {cart, setCart} = useContext(ProductContext) const addQuantity = (cartItem) => { return cart.map((item) => ( cartItem.id === item.id ? item.quantity = item.quantity + 1 : item )) } const removeQuantity = (cartItem) => { cart.map((item) => ( cartItem.id === item.id ? item.quantity = item.quantity - 1 : item )) } return ( { cart.map((cartItem) => ( <tr key={cartItem.id}> <td class="quantity__item"> <div class="quantity"> <div class="pro-qty-2 d-flex align-items-center justify-content-center text-center"> <button className='increase' onClick={() => removeQuantity(cartItem)}> -</button> {cartItem.quantity} <button className='increase' onClick={() => addQuantity(cartItem)}>+</button> </div> </div> </td> </tr> )) })}setCart para actualizar ningún estado.cart . No mutes el estado de reacción. Use la función de actualización de estado setCart para poner en cola una actualización de estado para activar una nueva representación para ver el estado actualizado. Use una actualización de estado funcional para actualizar correctamente desde el estado anterior y recuerde que debe copiar superficialmente cualquier estado que se esté actualizando.
Ejemplo:
function CardItem() { const { cart, setCart } = useContext(ProductContext); const addQuantity = (cartItem) => { setCart(cart => cart.map(item => cartItem.id === item.id ? { // <-- new item object reference ...item, // <-- shallow copy item quantity: item.quantity + 1, // <-- update property } : item )); }; const removeQuantity = (cartItem) => { setCart(cart => cart.map(item => cartItem.id === item.id ? { ...item, quantity: item.quantity - 1, } : item )); }; return ( {cart.map((cartItem) => ( <tr key={cartItem.id}> <td class="quantity__item"> <div class="quantity"> <div class=" .... "> <button className='increase' onClick={() => removeQuantity(cartItem)}> - </button> {cartItem.quantity} <button className='increase' onClick={() => addQuantity(cartItem)}> + </button> </div> </div> </td> </tr> )) }); }Dado que agregar/eliminar es esencialmente la misma acción, es común usar una sola función para manejar ambas y pasar la cantidad que desea ajustar.
function CardItem() { const { cart, setCart } = useContext(ProductContext); const addQuantity = (id, amount) => () => { setCart(cart => cart.map(item => cartItem.id === id ? { ...item, quantity: item.quantity + amount, } : item )); }; return ( {cart.map((cartItem) => ( <tr key={cartItem.id}> <td class="quantity__item"> <div class="quantity"> <div class=" .... "> <button className='increase' onClick={addQuantity(cartItem.id, -1)} > - </button> {cartItem.quantity} <button className='increase' onClick={addQuantity(cartItem.id, 1)} > + </button> </div> </div> </td> </tr> )) }); }Recomendaré usar reductores con contexto para administrar el estado. Algo así como debajo de un nuevo CartReducer con acciones AGREGAR y ELIMINAR elementos, etc.
const [state, dispatch] = useReducer(CartReducer, initalState); const addToCart = (id) => { dispatch({ type: ADD, payload: id}); }; const showHideCart = () => { dispatch({ type: SHOW, payload:'' }); }; const removeItem = (id) => { dispatch({ type: REMOVE, payload: id }); };Puede consultar este proyecto si ayuda a carrito de compras con contexto-api