Me encontré con un obstáculo con un proyecto mío de reacción personal en el que estoy creando una aplicación meteorológica.
La primera fase de mi proyecto es obtener el clima en función de la geolocalización de un usuario.
Tengo el siguiente código:
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY; // retreive API data, display forecast info export default function GeolocationForecast() { // initialize state variables for weather data and geo coordinates const [data, setData] = useState(''); const [userLat, setUserLat] = useState(null); const [userLon, setUserLon] = useState(null); const [userStatus, setUserStatus] = useState(null); useEffect(() => { fetchUserGeolocationAndForecast(); }, []); // get user's geo coordinates, insert into API query, return API response results async function fetchUserGeolocationAndForecast() { (function getUserGeoData() { if (!navigator.geolocation) { setUserStatus('Error: Geolocation is not supported by your browser'); } else { setUserStatus('Loading...'); navigator.geolocation.getCurrentPosition( (position) => { // update status and lat and lng position for user setUserStatus(null); setUserLat(position.coords.latitude); setUserLon(position.coords.longitude); console.log('geocoords saved to state') console.log('user geo data', userLat, userLon, userStatus); }, () => { setUserStatus('Unable to retrieve your location :('); }); } })(); const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${userLat}&lon=${userLon}&units=imperial&appid=${API_KEY}`; axios.get(apiUrl) .then((res) => { // forecast data response from API const forecastData = res.data.daily; // update state variable with response data setData(forecastData); console.log('geoForecast res', forecastData); console.log('full geoForecast res', res); }).catch(error => console.error(`Error: ${error}`)); } return ( <div> <span><h1>7-Day Forecast</h1><LocationOnIcon fontSize="large" /></span> {/* <h4>{userStatus}</h4> */} <GeoForecast data={data} /> </div> ); }; Mi objetivo: obtener la longitud y latitud del usuario ANTES de consultar el punto final de la API (variable definida como apiUrl en el código anterior). Intenté convertir la función getUserGeoData en un IIFE para probar, pero me gustaría implementar async/await en lugar de un IIFE, tendría más sentido.
Ahí es donde estoy atascado. Si necesita más información, con gusto se la proporcionaremos. Cualquier ayuda/crítica es bienvenida.