Necesito eliminar objetos de una matriz almacenada en el estado del carrito .
Esto debe hacerse iterando a través de las cadenas almacenadas dentro de la matriz de selectedCart . Para cada cadena de carrito seleccionado que coincida con la cadena del carrito (dentro de un objeto/clave), debe eliminar todo el objeto.
El siguiente código parece eliminar solo el objeto que coincide con la cadena de selectedCart en el último índice SOLAMENTE.
entonces si es
const [selectedCart, setSelectedCart] = ['test', 'this', 'data'] const [cart, setCart] = [{name: "this"}, {name: "data"}, {name: "test"}]Y la clave de cada objeto (nombre) tiene el valor de todas estas cadenas... solo se filtra la cadena 'datos'. Si cambio la primera y la última posición (por lo que 'prueba' es la última), solo se filtra la cadena 'prueba'.
const [cart, setCart] = useState([]) const [selectedCart, setSelectedCart] = [] selectedCart.forEach(selected => setCart(cart.filter(entry => entry.name !== selected)) )Editar: para la recomendación sobre otra pregunta con respecto a .filter(), parece que solo es aplicable fuera de useState(). Cuando tomo un enfoque similar con vainilla javascript, parece funcionar bien.
Debe tener cuidado al configurar el estado varias veces a la vez. Creo que en este caso quieres usar una actualización funcional como esa
selectedCart.forEach(selected => setCart(cart => cart.filter(entry => entry.name !== selected)) ) Aunque la respuesta de speed-o-soundSonic probablemente sea ideal: setCart(cart.filter(entry => !selectedCart.includes(entry.name)))
aquí estoy dando la solución completa a su problema con la interfaz de usuario. Por favor, míralo.
let cartArr = [...cart]; const selectedCartArr = [...selectedCart]; selectedCartArr.forEach((selected) => { cartArr = cartArr.filter((el) => el.name !== selected); }); setCart(cartArr); setViewSelectedCart(selectedCartArr);Compruebe amablemente mi solución aquí: - https://codesandbox.io/s/react-filter-question1-y17dd?file=/src/App.js:851-961
import "./styles.css"; import { useEffect, useState } from "react"; export default function App() { const dataArr = [ { id: 1, name: "item a" }, { id: 2, name: "item b" }, { id: 3, name: "item c" }, { id: 4, name: "item d" }, { id: 5, name: "item e" } ]; const [cart, setCart] = useState([]); const [selectedCart, setselectedCart] = useState([]); const [viewSelectedCart, setViewSelectedCart] = useState([]); useEffect(() => { const data = [...dataArr]; setCart(data); }, []); const changeHandler = (event) => { const _thisName = event.target.dataset.name; const selectedCartArr = [...selectedCart]; selectedCartArr.push(_thisName); setselectedCart(selectedCartArr); }; const applyHandler = (event) => { let cartArr = [...cart]; const selectedCartArr = [...selectedCart]; selectedCartArr.forEach((selected) => { cartArr = cartArr.filter((el) => el.name !== selected); }); setCart(cartArr); setViewSelectedCart(selectedCartArr); }; return ( <> <div className="wrapper"> <div className="cart"> <h3>Cart</h3> {cart.map((d) => { return ( <div key={d.id}> <input type="checkbox" id={d.id} onChange={changeHandler} data-name={d.name} /> <label htmlFor={d.id}>{d.name}</label> </div> ); })} </div> <div className="selectedCart"> <h3>Selected Cart View</h3> <ol> {viewSelectedCart.map((el, i) => { return <li key={i}>{el}</li>; })} </ol> </div> </div> <div className="button__wrapper"> <button className="btn btn-apply" onClick={applyHandler}> Apply </button> </div> </> ); }