React Native中geolocation持续重复调用问题咨询

嘿，这个问题我太熟啦！你遇到的无限调用问题，根源出在useEffect的依赖数组设置上。

你现在写的useEffect没有指定任何依赖项，这就意味着它会在组件每一次渲染完成后都自动执行。咱们理清楚这个循环链条：

1. 组件首次渲染，useEffect触发，调用getCoordinate获取位置
2. 获取到位置后调用setCoordinate更新状态，状态变化会触发组件重新渲染
3. 组件重新渲染后，因为useEffect没有依赖限制，它会再次执行，又调用getCoordinate，再次更新状态
4. 就这样循环往复，形成了无限调用的死循环

快速解决方法 #

给useEffect加上一个空的依赖数组，就能让它只在组件首次挂载时执行一次：

useEffect(() => {
  getCoordinate();
}, []); // 空数组表示没有依赖，仅在组件挂载时执行一次

额外的优化建议 #

为了让代码更健壮，我还想给你两个小提示：

• 给coordinate设置初始值，避免初始状态为undefined可能引发的渲染问题：

  const [coordinate, setCoordinate] = useState({ latitude: 0, longitude: 0 });
  

• 别忘了处理定位失败的场景，给getCurrentPosition添加错误回调，方便排查问题：

  const getCoordinate = () => {
    navigator.geolocation.getCurrentPosition(
      data => {
        setCoordinate({
          latitude: data.coords.latitude,
          longitude: data.coords.longitude,
        });
      },
      error => {
        console.error('获取位置失败:', error.message);
      }
    );
  };
  

这样修改后，getCoordinate就只会在组件第一次加载时调用一次，不会再无限重复执行啦！

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