Estoy tratando de almacenar los valores de latitud y longitud que calculé dentro de la función. Si console.log . registro ambos valores dentro de la función, funciona bien. Sin embargo, si devuelvo esos valores para usarlos en otro lugar, entonces no puedo hacerlo (arroja un error en la consola que indica que esta lista de coordinates no está definida) . Lo que sea que esté devolviendo de esta función de Geocoding , se muestra indefinido en la consola. Aquí está el fragmento de código:
function Geocoding() { axios.get('https://maps.googleapis.com/maps/api/geocode/json', { params: { address: enteredAddress, key: 'my API key here' } }) .then(function (response) { var lat = response.data.results[0].geometry.location.lat; var lng = response.data.results[0].geometry.location.lng; return [lat, lng]; }) .catch(function (error) { console.log(error); }); } const submitHandler = (event) => { event.preventDefault(); var coordinates = Geocoding(); const userInput = { //object location: { latitude: coordinates[0], longitude: coordinates[1], maxDistance: enteredDistance }, instrumentType: enteredInstrumentType, awardNumber: enteredAwardNumber, includeRetired: enteredIRI }; props.onSaveUserInput(userInput); setEnteredAddress(''); setEnteredDistance(''); setEnteredInstrumentType(''); setEnteredAwardNumber(''); setEnteredIRI(''); };El problema es que la Geocoding no devuelve nada. De todos modos, convertiría el código a async / await si es posible para que sea más fácil de comprender. Eche un vistazo a continuación al mismo código corregido con async / await .
async function Geocoding() { try { const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', { params: { address: enteredAddress, key: 'my API key here' } }) var lat = response.data.results[0].geometry.location.lat; var lng = response.data.results[0].geometry.location.lng; return [lat, lng]; } catch (error) { console.error(error) throw error; } } const submitHandler = async (event) => { event.preventDefault(); var coordinates = await Geocoding(); const userInput = { //object location: { latitude: coordinates[0], longitude: coordinates[1], maxDistance: enteredDistance }, instrumentType: enteredInstrumentType, awardNumber: enteredAwardNumber, includeRetired: enteredIRI }; props.onSaveUserInput(userInput); setEnteredAddress(''); setEnteredDistance(''); setEnteredInstrumentType(''); setEnteredAwardNumber(''); setEnteredIRI(''); }; Tenga en cuenta que para llamar a Geocoding necesita usar también async / await o usar Promise.then like Geocoding().then((coordinates) => {...})
Su geocodificación no devuelve variables. Simplemente llama a otra función.
function Geocoding() { axios.get().then().catch(); } Las funciones get / then / catch devuelven una Promise . Puedes devolver la Promise .
function Geocoding() { return axios.get().then().catch(); } Puede obtener la variable llamando a then .
const submitHandler = event => { event.preventDefault(); Geocoding().then(coordinates => { const userInput = { // ... setEnteredIRI(""); }); }; Por cierto, si hay un error, lo atrapa en la función Geocoding y no devuelve nada en la catch . Las coordinates en Geocoding().then(coordinates => {}) no estarán definidas.
Tú puedes cambiarlo:
function Geocoding() { return axios .get("https://maps.googleapis.com/maps/api/geocode/json", { params: { address: enteredAddress, key: "my API key here", }, }) .then(function (response) { var lat = response.data.results[0].geometry.location.lat; var lng = response.data.results[0].geometry.location.lng; return [lat, lng]; }); } const submitHandler = event => { event.preventDefault(); Geocoding() .then(coordinates => { const userInput = { //object location: { latitude: coordinates[0], longitude: coordinates[1], maxDistance: enteredDistance, }, instrumentType: enteredInstrumentType, awardNumber: enteredAwardNumber, includeRetired: enteredIRI, }; props.onSaveUserInput(userInput); setEnteredAddress(""); setEnteredDistance(""); setEnteredInstrumentType(""); setEnteredAwardNumber(""); setEnteredIRI(""); }) .catch(function (error) { console.log(error); }); };Si te gusta async/await
async function Geocoding() { const response = await axios.get( "https://maps.googleapis.com/maps/api/geocode/json", { params: { address: enteredAddress, key: "my API key here", }, } ); const lat = response.data.results[0].geometry.location.lat; const lng = response.data.results[0].geometry.location.lng; // or // const { lat, lng } = response.data.results[0].geometry.location; return [lat, lng]; } const submitHandler = async event => { event.preventDefault(); try { const coordinates = await Geocoding(); const userInput = { //object location: { latitude: coordinates[0], longitude: coordinates[1], maxDistance: enteredDistance, }, instrumentType: enteredInstrumentType, awardNumber: enteredAwardNumber, includeRetired: enteredIRI, }; props.onSaveUserInput(userInput); setEnteredAddress(""); setEnteredDistance(""); setEnteredInstrumentType(""); setEnteredAwardNumber(""); setEnteredIRI(""); } catch (error) { console.log(error); } };