Tengo problemas para entender por qué una lista no se actualiza en React. Para mi sitio web que estoy construyendo, estoy tratando de agregar un botón de 'favoritos', pero cuando hace clic en el botón, actualiza el estado pero los cambios nunca se vuelven a mostrar en la lista. Traté de hacer una versión más simple, pero esto tampoco funciona:
import React, { useState } from 'react'; import './App.css'; function App() { const [favorites, setFavorites] = useState([]); function addFavorite(name, id) { let newFavorites = favorites; let newFav = {name: name, id: id}; newFavorites.push(newFav); setFavorites(newFavorites); } return ( <div className="App"> <ul> {favorites.map((val) => { return(<li key={val.id}><span>{val.name}</span></li>); })} </ul> <button onClick={() => addFavorite("Thing1", 1)}>Thing 1</button> <button onClick={() => addFavorite("Thing2", 2)}>Thing 2</button> <button onClick={() => {console.log(favorites)}}>Check</button> </div> ); } export default App; Puedo ver los cambios de estado en la consola cuando los registro, pero el elemento <ul> nunca se actualiza. He buscado en línea, pero la mayoría de los artículos que he encontrado no han sido muy útiles (creo que el código de ejemplo que escribí se parece mucho a este artículo .
let newFavorites = favorites;Esto asigna newFavorites para apuntar a favoritos
newFavorites.push(newFav); Debido a que newFavorites apunta a favoritos, que es una matriz en state , no puede insertar nada en él y hacer que se represente ese cambio.
Lo que debe hacer es completar una nueva matriz newFavorites con el contenido de favoritos.
Probar
const newFavorites = [...favorites];Eso debería funcionar
Haría algunos cambios en su función addFavourite:
function addFavorite(name, id) { let newFav = {name, id};
setFavorites([…favourites, newFav]);}
De esta manera, cada vez que haga clic en favorito, se asegurará de que se cree una nueva matriz con el operador de propagación
No funciona porque el uso está mutando el estado existente. La lista se está actualizando, pero no se representará como useState solo se representa cuando el parámetro que se le pasa es diferente del anterior, pero en su caso, aunque está cambiando los elementos de la lista, la referencia no se modifica.
Para que funcione, puede usar el operador de propagación para las listas, incluso Array.concat() devuelve una nueva matriz actualizada.
function addFavorite(name, id) { let newFav = {name: name, id: id}; setFavorites(prev=>[...prev, newFav]); }