Estoy tratando de implementar un carrito de compras usando contextos. El contexto funciona bien, pero necesito crear un método que elimine un producto con cada clic. Para hacer eso, tengo que usar la función useState() . Sin embargo, ni siquiera cambia los datos en el estado.
Aquí está mi código para la función. Avísame si algo no está claro.
Para más información. productsToPurchase es una matriz que tiene todos los productos comprados que se ve así:
[{itemId: "ps-5", qty:2},{itemId: "iphone-xr", qty:4},{itemId:"ps-4", qty:7}]
export const CartContext = createContext() class CartContextProvider extends Component { state = { productsToPurchase: [], totalPrice:[] } addProduct = (itemId, prices) => { this.setState(oldState => { const objWithIdExist = oldState.productsToPurchase.find((o) => o.itemId === itemId); return { productsToPurchase: !objWithIdExist ? [...oldState.productsToPurchase, { itemId, qty: 1, price: prices }] : oldState.productsToPurchase.map((o) => o.itemId !== itemId ? o : { ...o, qty: o.qty + 1 } ) } }) this.setState(oldState=>{ return{ totalPrice: getTotalAmount(oldState.productsToPurchase) } }) } decreaseProduct = (itemId) =>{ this.setState(oldState=>{ // catch the item by mapping return oldState.productsToPurchase.map(product=>{ if (product.itemId === itemId){ if (product.qty === 1){ //remove the product from the list console.log("qty is 1!") } else { console.log("Quantity is more than 1") return {...product, qty: product.qty - 1} } } }) }) } render() { return ( <CartContext.Provider value={{...this.state, addProduct: this.addProduct, decreaseProduct: this.decreaseProduct}}> {this.props.children} </CartContext.Provider> ) } } function getTotalAmount(productsToPurchase) { const totalPrice = [] productsToPurchase.map((product, productIndex) =>{ product.price.map((price, priceIndex)=>{ if (productIndex === 0){ totalPrice.push({currency: price.currency, amount: price.amount * product.qty}) } else { totalPrice.map(total=>{ if (total.currency === price.currency){ total.amount = total.amount + (price.amount * product.qty) } }) } }) }) return totalPrice } export default CartContextProvider;Si desea restar 1 de la cantidad del producto seleccionado y eliminarlo si llega a 0, intente esto
// Make sure you return the new state object in its entirety this.setState(({ productsToPurchase, ...oldState }) => ({ ...oldState, productsToPurchase: productsToPurchase.reduce((arr, product) => { // is this the selected product? if (product.itemId === itemId) { // product qty > 1, include it with decrement if (product.qty > 1) { return [...arr, { ...product, qty: product.qty - 1 }] } return arr // otherwise exclude this product } // otherwise, just include this product return [...arr, product] }, []) }))