ReactJS函数内无法获取DistanceMatrixService返回距离值求助

你的问题核心在于异步操作的时机没处理对，同时浏览器控制台的特性也给你造成了一些混淆，我来一步步拆解：

为什么console.dir(location)能看到属性，但location.distFinal是undefined？ #

当你执行console.dir(location)时，浏览器控制台显示的是对象的引用，而不是当时的静态快照。你展开对象的时候，getDistanceMatrix的回调已经执行完毕，distFinal已经被赋值，所以能看到；但同步执行的console.dir(location.distFinal)是在回调执行前就运行了，这时候distFinal还没被设置，自然是undefined。

根本问题：Promise的使用错误 #

你现在的写法是直接把service.getDistanceMatrix()的调用结果resolve了，但这个方法是异步回调式的，它不会立刻返回结果，你的Promise在回调执行前就已经resolve了，所以then里的代码会先于回调运行，这时候当然拿不到距离值。

修正后的代码 #

我们需要把Promise的resolve放在getDistanceMatrix的回调内部，确保只有当距离数据获取成功后，Promise才会resolve：

distanceBool = (event) => { 
  console.dir(event);
  const destination = ["Vancouver"];
  const service = new window.google.maps.DistanceMatrixService();

  new Promise((resolve, reject) => {
    service.getDistanceMatrix({
      origins: ["Waterloo ON"],
      destinations: destination,
      travelMode: 'DRIVING',
      avoidHighways: false,
      avoidTolls: false
    }, function(response, status){
      if (status == 'OK') {
        const origins = response.originAddresses;
        const destinations = response.destinationAddresses;
        // 这里取第一个起点到第一个终点的距离，你可以根据需求调整循环逻辑
        const element = response.rows[0].elements[0];
        const distance = element.distance.text;
        // 把需要的数据resolve出去
        resolve({ distance, from: origins[0], to: destinations[0] });
      } else {
        // 处理请求失败的情况
        reject(new Error(`Distance Matrix request failed: ${status}`));
      }
    });
  }).then(({ distance }) => {
    // 这里可以安全地使用distance了
    console.log(distance);
    // 更新React组件状态
    this.setState({ dist: distance });
  }).catch((error) => {
    // 处理请求失败的异常
    console.error(error);
  });
}

额外优化建议 #

• 不用额外声明location = this，你的distanceBool是箭头函数，this已经绑定了组件实例，直接用this即可
• 不需要额外存储distFinal，React组件状态才是存储这类数据的正确位置
• 增加错误处理逻辑，避免请求失败时没有任何反馈

内容的提问来源于stack exchange，提问作者its.david