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ío, simplemente registra continuamente sin un final a la vista (con los datos correctos). No estoy seguro de por qué no lo registrará correctamente solo una vez con los datos que necesito usar.
¿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(); // logs empty array in the console if dependency array is empty // logs correct data when dependency array isn't empty - ie [uploadsData] console.log(uploadsData); }, []);Esto se debe a que está refiriendo los datos de carga dentro de la devolución de llamada del useEffect uploadsData para obtener el registro de consola correcto, debe ejecutar ese código en un useEffect separado.
useEffect(() => { getUploads(); }, []); useEffect(() => { // logs empty array in the console if dependency array is empty // logs correct data when dependency array isn't empty - ie [uploadsData] console.log(uploadsData); }, [uploadsData]); De esta manera, la función getUploads se llama solo una vez y genera datos de uploadData correctos en la consola del navegador.
La primera vez imprimirá una matriz vacía ya que el estado de actualización es asíncrono en React.
DADO que agrega uploadsData a su matriz de dependencia. CUANDO su efecto se ejecuta, actualiza uploadsData ENTONCES el efecto se activará nuevamente.
¡Esto seguirá para siempre!