Google Distance Matrix Api React Js无法设置到状态的距离

Google Distance Matrix API 在 React.js 中设置状态的问题

基础概念

Google Distance Matrix API 是 Google Maps 平台提供的一项服务，用于计算多个起点和终点之间的距离和行程时间。在 React.js 应用中集成此 API 时，开发者经常遇到无法将获取的距离数据正确设置到组件状态的问题。

常见原因及解决方案

1. 异步处理问题

原因：API 调用是异步的，但开发者可能在响应返回前就尝试设置状态。

解决方案：确保在 Promise 解决后再设置状态。

import React, { useState } from 'react';

function DistanceCalculator() {
  const [distance, setDistance] = useState(null);
  
  const calculateDistance = () => {
    const service = new window.google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: ['New York, NY'],
        destinations: ['Los Angeles, CA'],
        travelMode: 'DRIVING',
      },
      (response, status) => {
        if (status === 'OK') {
          const distanceText = response.rows[0].elements[0].distance.text;
          setDistance(distanceText); // 正确的位置设置状态
        }
      }
    );
  };

  return (
    <div>
      <button onClick={calculateDistance}>Calculate Distance</button>
      {distance && <p>Distance: {distance}</p>}
    </div>
  );
}

2. API 未正确加载

原因：Google Maps JavaScript API 未完全加载就尝试使用 Distance Matrix 服务。

解决方案：确保 API 加载完成后再调用。

useEffect(() => {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
  script.async = true;
  script.onload = () => {
    // API 加载完成后才能使用
    setIsLoaded(true);
  };
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

3. 状态更新批处理问题

原因：React 可能会批量处理状态更新，导致看起来状态没有变化。

解决方案：使用函数式更新确保获取最新状态。

setDistance(prevDistance => {
  // 使用前一个状态值进行更新
  return response.rows[0].elements[0].distance.text;
});

4. CORS 限制

原因：如果直接从前端调用 API 而没有正确配置，可能会遇到跨域问题。

解决方案：建议通过后端服务代理 API 调用，或确保前端配置了正确的 CORS 头。

5. API 密钥问题

原因：无效或未正确配置的 API 密钥会导致请求失败。

解决方案：检查 API 密钥是否正确，并在 Google Cloud 控制台中启用 Distance Matrix API。

最佳实践

错误处理：始终处理 API 调用可能出现的错误
加载状态：添加加载状态提升用户体验
API 限制：注意 API 的配额和限制
环境变量：不要在前端代码中硬编码 API 密钥

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);

const calculateDistance = async () => {
  setIsLoading(true);
  setError(null);
  
  try {
    const service = new window.google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: ['New York, NY'],
        destinations: ['Los Angeles, CA'],
        travelMode: 'DRIVING',
      },
      (response, status) => {
        setIsLoading(false);
        if (status === 'OK') {
          setDistance(response.rows[0].elements[0].distance.text);
        } else {
          setError('Failed to calculate distance');
        }
      }
    );
  } catch (err) {
    setIsLoading(false);
    setError(err.message);
  }
};

通过以上方法和注意事项，您应该能够解决在 React.js 中无法将 Google Distance Matrix API 结果设置到状态的问题。