Tengo una matriz de posts y una matriz separada de favourites . Quiero que la interfaz de usuario muestre "Favorito: [Sí o No]" dependiendo de si favourites incluyen el valor de las posts .
El problema es que cuando agrego a favourites la interfaz de usuario nunca se actualiza.
Hice un ejemplo mínimo aquí: https://codesandbox.io/s/usestate-useeffect-playground-forked-n645c?file=/src/index.js Soy nuevo en reaccionar y siento que esto debería ser simple: Hice un montón de investigación, pero no puedo conseguirlo.
import React, { useState } from "react"; import ReactDOM from "react-dom"; function App() { return <TestPage />; } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); export default function TestPage() { const posts = ["1", "2", "3", "4", "5", "6"]; const [favourites, setFavourites] = useState(["1"]); return ( <> {posts.map((post) => ( <div style={{ "background-color": "lightblue", width: "300px", height: "60px", margin: "5px", "font-size": "20px" }} onClick={() => { favourites.push(post); setFavourites(favourites); alert("Added " + post + " to favourites"); }} > {post} <br /> Favourited: {favourites.includes(post) ? <>Yes</> : <>No</>} </div> ))} </> ); }favourites.push(post); setFavourites(favourites); Los estados de reacción deben ser inmutables. .push modificará la matriz existente, y luego, cuando establece el estado, reacciona hace una comparación === entre los estados antiguo y nuevo, ve que son la misma matriz y, por lo tanto, omite la representación. En su lugar, debe crear una nueva matriz:
setFavourites([...favourites, post]);También es una buena idea usar la versión funcional de setFavorites cuando su nuevo estado se base en el anterior. Esto asegura que tenga el último valor del estado y así elimina la posibilidad de una categoría de errores.
setFavourites(prev => { return [...prev, post]; });Puedes hacerlo:
onClick={() => { setFavourites(favourites.concat([post])); alert("Added " + post + " to favourites"); }}Siempre debe crear un nuevo objeto y enviarlo al estado.
Si empujas un objeto al estado que ya está en el estado, React lo ignorará, incluso si el contenido del objeto ha cambiado (no hace una comparación de contenido profunda).
Este código funcionará:
onClick={() => { const newFavs = [favourites]; // create copy of original object newFavs.push(post); setFavourites(newFavs); alert("Added " + post + " to favourites"); }}