React Leaflet中Invalid LatLng object报错问题求助

你遇到的这个错误，核心原因是组件第一次渲染时，geoData的初始值是空数组[]，此时访问geoData.lat和geoData.lng自然是undefined。虽然useEffect里的异步请求会在首次渲染后获取数据并更新状态，但组件的首次渲染已经触发了Marker的无效位置报错——至于控制台能打印出经纬度，是因为console.log会异步追踪状态更新后的最新值，无法掩盖首次渲染的错误。

修正后的完整代码 #

import { useState, useEffect } from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet';

function USMapComponent() {
  // 初始状态设为null，避免首次渲染时访问不存在的属性报错
  const [geoData, setGeoData] = useState(null);
  // 新增加载/错误状态，优化用户体验
  const [isLoading, setIsLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => {
    const getGeoLocation = async () => {
      try {
        setIsLoading(true);
        const response = await axios(
          "https://api.opencagedata.com/geocode/v1/json?q=United%20States&key={accessToken}&language=en&pretty=1"
        );
        // 用可选链避免API返回异常时的数组越界
        const targetGeometry = response.data.results[0]?.geometry;
        if (targetGeometry) {
          setGeoData(targetGeometry);
        } else {
          throw new Error("未获取到有效的美国地理坐标");
        }
      } catch (err) {
        setFetchError(err.message);
        console.error("地理数据请求失败:", err);
      } finally {
        setIsLoading(false);
      }
    };

    getGeoLocation();
  }, []);

  // 修正console.log：现在geoData就是geometry对象本身
  console.log(geoData);

  // 加载/错误状态的兜底渲染
  if (isLoading) return <div>正在加载地图数据...</div>;
  if (fetchError) return <div>加载失败：{fetchError}</div>;

  return (
    <div>
      <Map center={[52.6376, -1.135171]} zoom={12}>
        <TileLayer 
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
        />
        {/* 只有拿到有效经纬度时才渲染Marker */}
        {geoData?.lat && geoData?.lng && (
          <Marker position={[geoData.lat, geoData.lng]} />
        )}
      </Map>
    </div>
  );
}

export default USMapComponent;

关键修改说明 #

• 初始状态调整：把useState([])改为useState(null)，避免首次渲染时访问数组不存在的lat/lng属性。
• 条件渲染Marker：通过geoData?.lat && geoData?.lng做前置判断，确保只有拿到有效经纬度后才渲染Marker，从根源上避免Invalid LatLng错误。
• 边界情况处理：新增加载/错误状态，同时用可选链response.data.results[0]?.geometry处理API返回异常的情况，避免数组越界报错。
• 修正日志逻辑：原代码console.log(geoData.geometry)是错误的，因为geoData已经被设置为geometry对象本身，直接打印geoData即可。

内容的提问来源于stack exchange，提问作者KillMe