Estoy trabajando en un carrito de compras en React, y para poder eliminar artículos individuales, quiero comparar la identificación del artículo con la identificación de todos los artículos en la matriz, de modo que si la identificación es la misma, yo puede filtrar ese elemento de la matriz. Sin embargo, el método de filtro no parece funcionar. ¿Me estoy perdiendo de algo?
Función:
const deleteItem = () => { cartArray.map((e) => { console.log("I'm working"); if (e.id != id) { setCartArray(cartArray.filter((e) => e.id !== id)); } }); };Componente donde se llama a la función:
const CartProduct = ({ cartArray, setCartArray, imgUrl, nameUrl, priceUrl, id, }) => { const shortenProductName = (name) => { if (name.length > 40) return name.slice(0, 40) + "..."; else return name; }; const deleteItem = () => { cartArray.map((e) => { console.log("I'm working"); if (e.id != id) { setCartArray(cartArray.filter((e) => e.id !== id)); } }); }; return ( <div className="cart-product"> <p></p> <img src={imgUrl} alt="product image" /> <div className="name-price-container"> <p>{shortenProductName(nameUrl)}</p> {/* <p>{nameUrl.slice(0, ) + "..."}</p> */} <h4>€ {priceUrl}</h4> </div> <DeleteIcon onClick={deleteItem} /> </div> ); };¡Gracias!
Probablemente debería eliminar toda la parte .map . Además, pase el id a la función.
const deleteItem = id => { setCartArray(cartArray.filter(e => e.id !== id)); };El método filter() crea una nueva matriz con todos los elementos que pasan la prueba implementada para que pueda filtrar cartArray únicamente con la función de filter .
const deleteItem = () => { setCartArray(cartArray.filter(e => e.id !== id)); };No necesitas el mapa y probablemente simplificaría todo. Aquí un ejemplo práctico:https://codesandbox.io/s/wizardly-wilson-fxwje?file=/src/App.js
import React from "react"; export default function App() { const [cartArray, setCartArray] = React.useState([ { id: 1, title: "first" }, { id: 2, title: "second" }, { id: 3, title: "third" } ]); const deleteItem = (e) => { setCartArray( cartArray.filter( (cartItem) => parseInt(e.target.value, 10) !== cartItem.id ) ); }; return ( <div className="App"> <div> {cartArray.map((item) => { return ( <button onClick={deleteItem} value={item.id}> {item.title} </button> ); })} </div> </div> ); }