Por alguna razón, cuando actualizo mi estado desde el enlace useEffect, no persiste. Espero que mi lista de usuarios siga creciendo, pero en cambio solo veo un usuario. ¿Por qué los usuarios no crecen?
import { useState, useEffect } from "react"; interface IUser { name: { first: string; last: string; }; picture: { thumbnail: string; }; } function App() { const [users, setUsers] = useState<IUser[]>([]); const getUserName = (user: IUser): string => { if (!user) return ""; return `${user.name.first} ${user.name.last}`; }; const getThumbnail = (user: IUser): string => { if (!user) return ""; return user.picture.thumbnail; }; useEffect(() => { setInterval(() => { fetch("https://randomuser.me/api") .then((res) => res.json()) .then((json) => { let newusers = [...users, json.results[0]]; setUsers(newusers); }) .catch((err) => { console.log(err); }); }, 3000); }, []); return ( <div className="App"> {users?.map((user, idx) => ( <div key={idx}> <h2>{getUserName(user)}</h2> <img src={getThumbnail(user)} /> </div> ))} </div> ); } export default App;Aquí hay un codesandbox que demuestra el problema https://codesandbox.io/s/react-typescript-forked-5h3553?file=/src/App.tsx:0-1054
El problema proviene del uso de setInterval . Cuando se define, crea un cierre que incluye el valor actual de la variable users que, por supuesto, comienza como [] . Entonces, cada vez que se invoca el intervalo, está usando el valor que tenía en el momento de la instanciación.
Afortunadamente, las llamadas a setState pasan un parámetro del estado anterior, que puede usar para solucionar su problema rápidamente:
.then((json) => { setUsers((prev) => [...prev, json.results[0]]); })Debe usar el método devuelto por useState hook para actualizar la matriz.
Aquí está la solución:
let newuser = json.results[0]; setUsers(prev => [...prev, newuser]);En vez de:
let newusers = [...users, json.results[0]]; setUsers(newusers);Simplemente actualice setUsers directamente así:
setUsers(prevState => […prevState, json.results[0]]);