Estoy tratando de obtener la latitud y la longitud de geoLocation y usarlo para obtener datos de una API meteorológica. Sin embargo, el problema es que tan pronto como paso el estado de latitud o longitud a mi función fetchWeather e intento acceder a ella, solo funciona una vez. Si vuelvo a cargar la página, el estado de latitud y longitud se muestra como indefinido, que es el estado inicial. Es como si el estado no se volviera a establecer después de actualizar la página. Fuera de la función, el estado funciona bien incluso después de recargar la página.

 function WeatherToday() { const [weather, setWeather] = useState([]); const [Loading, setLoading] = useState(false); const [latitude, setLatitude] = useState(); const [longitude, setLongitude] = useState(); const fethGeoLocation = async () => { try { navigator.geolocation.getCurrentPosition(function (position) { setLatitude(position.coords.latitude); setLongitude(position.coords.longitude); }); } catch (error) { console.warn(error); } }; console.log(latitude, longitude); // Works on every call const fetchWeatherData = async () => { try { setLoading(true); console.log('geolocation', latitude, longitude); // does not work, latitude and longitude is undefined const res = await fetchWeather(latitude, longitude); setWeather(res.data); setLoading(false); } catch (error) { setLoading(false); console.warn(error); } }; useEffect(() => { fethGeoLocation(); fetchWeatherData(); }, []); if ( !Loading && weather && ) { return ( <div className={WeatherTodayStyles.container}> <Forecast forecast={weather} /> <HourlyForecast forecast={weather} /> </div> ); } else { return <div>Loading...</div>; } } export default WeatherToday;