Quiero enviar una solicitud de API en useEffect hook y establecer el valor de las variables de estado con los datos obtenidos. Agregué 2 console.log para detectar el valor de las variables de estado. Excepto que el segundo registro se configure con los datos obtenidos, sin embargo, todavía imprime nulo.
Aquí está mi código:
import { useEffect, useState } from "react"; import axios from "axios"; const Test = () =>{ const [users, setUsers] = useState(null); useEffect(()=>{ const getData = async ()=>{ const resp = await axios.get("https://jsonplaceholder.typicode.com/todos"); console.log(users); setUsers(resp.data); console.log(users); }; getData(); },[]) return ( <div>hello</div> ) }; export default Test;Además, la salida de la consola se ve así:
null nullEl setter de useState es asíncrono, por lo tanto, se llamará a su segundo console.log antes de que los users se actualicen.
Para que funcione, simplemente póngalo fuera del useEffect .
import { useEffect, useState } from "react"; import axios from "axios"; const Test = () =>{ const [users, setUsers] = useState(null); useEffect(()=>{ const getData = async ()=>{ const resp = await axios.get("https://jsonplaceholder.typicode.com/todos"); console.log(users); setUsers(resp.data); }; getData(); },[]) console.log(users); return ( <div>hello</div> ) }; export default Test; o en otro useEffect dedicado, pasando users en la matriz de dependencias.
import { useEffect, useState } from "react"; import axios from "axios"; const Test = () =>{ const [users, setUsers] = useState(null); useEffect(()=>{ const getData = async ()=>{ const resp = await axios.get("https://jsonplaceholder.typicode.com/todos"); console.log(users); setUsers(resp.data); }; getData(); },[]) useEffect(()=>{ console.log(users); },[users]) return ( <div>hello</div> ) };