Estoy tratando de aprender React haciendo una aplicación meteorológica y me he apilado usando la función async/await. Aquí está el problema al que me enfrento..

Tengo una función que hace una llamada axios a una API y luego intento establecer algunas variables de estado. La idea es que parece que la aplicación está ejecutando los métodos setState antes de que se resuelva la promesa.

Aquí está el método que hace la llamada axios.

 const fetchWeeklyWeather = async () => { try { let response = await axios.get(url); console.log('%cFetch Weekly Weather Response:', 'color: #bada55', response); setCurrentWeather(response.data.current); setWeeklyWeather(response.data.daily); setWeatherAlerts(response.data.alerts); } catch (err) { // Handle Error Here console.error(err); } }

Y llamo a ese método en el componenteDidMount así:

 useEffect(() => { fetchWeeklyWeather(); console.log("Current Weather", currentWeather); console.log("Weekly Weather", weeklyWeather); console.log("Weather alerts", weatherAlerts); formatData(weeklyWeather); }, []);

Es raro porque a veces funciona, pero la mayoría de las veces no. Supongo que no estoy pensando bien con async/await. ¿Alguien puede darme una mano?

¡Muchas gracias!