React中Leaflet地图结合IP地理定位API的经纬度渲染失败问题

问题概述 #

在开发集成React Leaflet与IP地理定位API的IP地址追踪器时，控制台能正常打印通过props传递的纬度（lat）和经度（lng）值，但将这两个值赋值给location常量后，组件报错无法渲染。

问题原因 #

组件首次渲染时，address的初始值是空对象，此时props.position?.location?.lat和props.position?.location?.lng均为undefined。当你将location设为[lat, lng]时，得到的是[undefined, undefined]，而React Leaflet的MapContainer和Marker组件要求传入有效的数值型坐标，无效值会触发渲染错误。

解决方案 #

方案1：为坐标设置默认值 #

使用空值合并运算符（??）为lat和lng设置默认坐标，确保组件首次渲染时location是有效的数组：

const Map = (props) => {
  // 若lat/lng未加载完成，使用默认坐标兜底
  const lat = props.position?.location?.lat ?? 37.40599;
  const lng = props.position?.location?.lng ?? -122.078514;
  const location = [lat, lng];

  console.log([lat, lng])

  return (
    <MapContainer
      className="h-screen z-10 pt-16"
      center={location}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={location}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

方案2：等待API数据加载完成后再渲染地图 #

通过加载状态控制地图渲染，确保只有当API数据返回后，才传递有效的坐标给Map组件：

// App组件
function App() {
  const [address, setAddress] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('https://geo.ipify.org/api/v2/country,city?apiKey=at_FmUFGKJxGxjnnNkYNr9W2TAv3XShk&ipAddress=8.8.8.8')
      .then((res) => {
        setAddress(res.data);
        setLoading(false);
      })
      .catch(err => console.log('error'));
  }, []);

  // 加载中显示占位内容
  if (loading) return <div className="loading">加载中...</div>;

  return (
    <div className="App font-Rubik">
      {/* 直接传递address，无需展开对象 */}
      <Map position={address} />
    </div>
  );
}

// Map组件
const Map = (props) => {
  // 此时address已加载完成，可直接访问属性
  const lat = props.position.location.lat;
  const lng = props.position.location.lng;
  const location = [lat, lng];

  console.log([lat, lng])

  return (
    <MapContainer
      className="h-screen z-10 pt-16"
      center={location}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={location}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

额外优化 #

• App组件中传递position时，无需使用{...address}展开对象，直接传递address即可，减少不必要的对象复制。
• 可在catch块中添加错误提示，方便调试API请求失败的情况。

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