Tengo un estado que está destinado a recibir la ubicación del usuario en la carga de la página.
const [userLocation, setUserLocation] = useState({ lat: null, lng: null, userAddress: '' })Creé una función getAddress que está destinada a devolver un valor de cadena de una dirección basada en coordenadas usando el paquete reaccionar Geocode npm
const getAddress = async (lat, lng) => { try { const res = await Geocode.fromLatLng(lat, lng) const address = res.results[0].formatted_address; return address } catch (err) { console.log(err.message) } }mi función getUserLocation se ejecuta en un useEffect en la carga de la página
const getUserLocation = () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log("Geolocation is not supported by this browser."); } } const showPosition = (position) => { setUserLocation({ ...userLocation, lat: position.coords.latitude, lng: position.coords.longitude, userAddress: getAddress(position.coords.latitude, position.coords.longitude) }) }mi objeto userLocation regresa de la siguiente manera:
USER LOCATION {lat: 43.829601, lng: -79.470408, userAddress: Promise} lat: 43.829601 lng: -79.470408 userAddress: Promise [[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: "126 Seabreeze Ave, Thornhill, ON L4J 9H1, Canada" [[Prototype]]: ObjectMe gustaría que se devuelva el valor del resultado de la promesa y nada más, obviamente. Hay alguna solución para esto?
Debido a que las funciones asíncronas devuelven una promesa, llamar a una le devolverá la promesa, no el resultado.
Aquí está llamando directamente a getAddress :
userAddress: getAddress(position.coords.latitude, position.coords.longitude) Pero si desea el resultado, deberá hacer que showPosition sea asíncrono y await el resultado de getAddress :
const showPosition = async (position) => { setUserLocation({ ... ... ... userAddress: await getAddress(position.coords.latitude, position.coords.longitude) }) }