我正在try 存储我在函数中计算的纬度和经度值.如果我在函数中同时输入这两个值,它就可以正常工作.然而,如果我返回这些值以在其他地方使用它们,那么我不能这样做(it throws an error in the console as having this coordinates list as undefined).无论我从这个Geocoding函数返回什么,它都会在控制台中显示undefined.以下是代码片段:

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('');
};

推荐答案

问题是Geocoding没有返回任何内容.无论如何,如果可能的话,我会将代码转换为async/await,这样更容易理解.下面看一下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('');
};

请注意,要拨打Geocoding,还需要使用async/awaitPromise.then,如Geocoding().then((coordinates) => {...})

Javascript相关问答推荐

使用续集和下拉栏显示模型属性

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

在拖放时阻止文件打开

屏幕右侧屏障上的产卵点""

html + java script!需要帮助来了解为什么我得到(无效的用户名或密码)

Regex结果包含额外的match/group,只带一个返回

我的角模板订阅后不刷新'

如何控制Reaction路由加载器中的错误状态?

确保函数签名中的类型安全:匹配值

为什么云存储中的文件不能公开使用?

为什么在函数中添加粒子的速率大于删除粒子的速率?

Docent.cloneNode(TRUE)不克隆用户输入

JavaScript -复制到剪贴板在Windows计算机上无效

在Java脚本中构建接口的对象

Chart.js Hover线条在鼠标离开时不会消失

在将元素追加到DOM之前,createElement()是否会触发回流?混淆abt DocumentFragment行为

如何调整下拉内容,使其不与其他元素重叠?

我想为我的Reaction项目在画布上加载图像/视频,图像正在工作,但视频没有

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但GET:Object.在Reaction项目中

如何使用Angular JS双击按钮