如何从useEffect Hook中获取经纬度值并在外部代码中使用

你需要使用useState Hook 存储异步获取的经纬度值，useEffect 的返回值仅用于执行组件卸载/依赖更新时的清理逻辑，无法直接将内部异步数据返回给外部作用域使用。

基础实现代码 #

首先在组件内声明存储经纬度的state，再修改useEffect逻辑，拿到定位结果后更新state即可：

import { useState, useEffect } from 'react';

// 组件内部声明state，初始值可以设为null
const [lat, setLat] = useState(null);
const [long, setLong] = useState(null);

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("定位功能可用");
      navigator.geolocation.getCurrentPosition(function (position) {
        // 拿到定位结果后更新state
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });
    } else {
      console.log("当前浏览器不支持定位功能");
    }
}, []);

之后你可以在组件任意位置直接使用lat、long变量，完全符合你想要的取值效果，示例用法：

// 传入其他模块/函数使用时，建议先判断值是否已经加载完成
if (lat && long) {
  console.log('当前经纬度：', lat, long);
  // 比如调用坐标转地址的工具函数
  const currentAddress = coordinateToAddress(lat, long);
}

进阶：封装为自定义Hook复用 #

如果需要在多个组件中使用定位能力，可以把逻辑封装成自定义Hook直接调用：

// 自定义定位Hook
function useGeolocation() {
  const [lat, setLat] = useState(null);
  const [long, setLong] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    if (!("geolocation" in navigator)) {
      setErrorMsg("当前浏览器不支持定位功能");
      return;
    }
    navigator.geolocation.getCurrentPosition(
      // 定位成功回调
      (position) => {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      },
      // 定位失败回调：比如用户拒绝授权
      (err) => {
        setErrorMsg(`定位失败：${err.message}`);
      }
    );
  }, []);

  return { lat, long, errorMsg };
}

// 组件内使用
function YourComponent() {
  const { lat, long, errorMsg } = useGeolocation();

  if (errorMsg) return <div>{errorMsg}</div>
  if (!lat || !long) return <div>定位中...</div>
  return <div>当前经纬度：{lat}，{long}</div>
}

注意事项 #

• 经纬度是异步获取的，初始渲染时数值为useState 配置的初始值（示例中为null），使用前建议增加非空判断，避免逻辑报错。
• 要覆盖用户拒绝授权、浏览器不支持定位的异常场景，避免页面功能卡住。

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