¿Por qué se ejecuta mi respuesta más de una vez con los datos correctos en lugar de solo una vez con useEffect()?
Sé que tener una dependencia vacía [] ejecuta useEffect() solo una vez, pero cuando se ejecuta solo una vez con una dependencia vacía [], registra una matriz vacía en la consola.
Cuando no está vacía, simplemente registra continuamente sin fin a la vista (con los datos correctos). No estoy seguro de por qué no registra correctamente solo una vez con los datos que necesito utilizar.
¿Qué estoy haciendo mal?
Código a continuación:
const [uploadsData, setUploadsData] = useState([]);
const getUploads = async () => {
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
}
await axios.get('http://localhost:8000/api/get-uploads', {headers})
.then(resp => {
console.log(resp);
setUploadsData([resp.data]);
}).catch(error => {
console.log(error);
});
};
useEffect(() => {
getUploads();
// registra una matriz vacía en la consola si la matriz de dependencias está vacía
// registra los datos correctos cuando la matriz de dependencias no está vacía, es decir, [uploadsData]
console.log(uploadsData);
}, []);
davy.ai
El problema está en el orden en el que se ejecuta el código. El
hook useEffectcon una matriz de dependencias vacía se ejecuta solo una vez cuando el componente se monta o actualiza, pero la funciónsetUploadsDataque busca los datos y actualiza el estado es asíncrona. Esto significa que cuando se llama aconsole.log(uploadsData)dentro deluseEffect, es posible que el estado aún no se haya actualizado, por lo que registra una matriz vacía.Para solucionar el problema, puedes mover la declaración
console.log(uploadsData)dentro del bloque.thende la llamadaaxios.get. Esto asegura que la declaración de registro solo se llame después de que el estado se haya actualizado con los datos devueltos por la API.Ejemplo: