Básicamente, tengo una matriz llamada "Héroes" y, a través de los botones, intento agregar o eliminar ciertos elementos de esa matriz a otra llamada "favoritos". Al agregar un héroe a favoritos, aparece el mensaje "¡elemento agregado a favoritos!" aparece, pero la parte en la que muestro mis favoritos en el documento parece mostrar un espacio en blanco en lugar del nombre del héroe como quiero. Además, la parte de mostrar "elemento ya agregado" o "lista de favoritos llena" no funciona. Además, al intentar agregar más de un héroe a favoritos, no me permite hacerlo. No sé qué estoy haciendo mal. El botón "borrar favoritos" funciona bien, y el botón "eliminar favorito" también parece funcionar.
´´´
const [favorites, setFavorites] = useState([]); const [message, setMessage] = useState(""); const addToFavorites = (id) => { if (favorites.includes((heroin) => heroin.id === id)){ setMessage("hero already in favorites!") } if (favorites.length = 6) { setMessage("favorites list full!") } const newFavorites = favorites.concat(heroin => heroin.id === id) setFavorites(newFavorites) setMessage("item added to favorites!") } const deleteFavorite = (id) => { const newFavorites = favorites.filter((heroin) => heroin.id !== id) setFavorites(newFavorites); setMessage(""); } {heroes.map((heroin)=>{ const {id, props} = heroin; return <div key={id}><h1>{props}</h1></div>; }) <button onClick={clearFavorites}>Clear favorites</button> <button value={id} onClick={()=>addToFavorites(id)}> Add to favorites</button> <button value={id} onClick={()=> deleteFavorite(id)}>remove favorite</button> <h4>{message}</h4> {favorites.map((favorite)=>{ const {name} = favorite; return ( <div> <h1>{name}</h1> </div> ) })}´´´
Está llamando a funciones de matriz que no aceptan devoluciones de llamada.
Array.prorotype.includes toma un valor, no una función de predicado. Dado que la matriz de favorites no tiene una versión exacta y estrictamente igual de la función (heroin) => heroin.id === id) , se devuelve falso porque ningún elemento puede coincidir.Array.prototype.concat agregará cualquier valor que se pase a una nueva copia de la matriz y devolverá la matriz.favorites.length = 6 está intentando asignar un valor a la propiedad de longitud.Código:
const addToFavorites = (id) => { if (favorites.includes((heroin) => heroin.id === id)) { // Always false! setMessage("hero already in favorites!"); } if (favorites.length = 6) { setMessage("favorites list full!"); } const newFavorites = favorites.concat(heroin => heroin.id === id); // only adds function instead of hero object setFavorites(newFavorites); setMessage("item added to favorites!"); }Array.prototype.find para buscar en la matriz un valor específico mediante una función de predicado.Código:
const addToFavorites = (id) => { const hero = favorites.find((heroin) => heroin.id === id); if (hero) { setMessage("hero already in favorites!"); } else { if (favorites.length === 6) { setMessage("favorites list full!"); } else { setFavorites(favorites => favorites.concat(hero)); setMessage("item added to favorites!"); } } }