React Native中useEffect绑定online状态后Geolocation回调异常排查

核心原因：未清除旧位置监听 + 闭包捕获旧状态 #

你的代码存在两个关键问题：

• 未清理旧监听实例：每次online状态变化时，useEffect都会执行并创建新的Geolocation.watchPosition监听，但之前的旧监听没有被销毁。当位置更新时，所有新旧监听的回调都会被触发。
• 闭包捕获旧状态：每个监听回调捕获的是它创建时的online值。比如初始online=false时创建的监听，它的回调里永远是false；当你把online设为true后，新监听的回调捕获true，但旧监听还在运行，所以位置更新时会同时触发新旧回调，就出现了true和false交替打印的情况。

解决方法 #

在useEffect的清理函数中销毁旧监听，确保每次online变化时只有最新的监听生效：

const [online, setOnline] = useState(false);

useEffect(() => {
  // 保存监听ID，用于后续清理
  const watchId = Geolocation.watchPosition(
    position => {
      console.log(online);
      if (online) {
        console.log('attempting to update location...');
        const payload = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          id: 1,
        };

        axios
          .post('http://localhost:3000/location/update', payload)
          .then(res => {
            if (res.status === 200) {
              console.log('Location updated in real-time!');
              return;
            }
          })
          .catch(err => console.log(err?.response || err));
      } else {
        console.log('Location changed offline!');
      }
    },
    err => console.log(err?.response || err)
  );

  // 清理函数：组件卸载或依赖变化时销毁旧监听
  return () => {
    Geolocation.clearWatch(watchId);
  };
}, [online]);

这样每次online更新时，旧监听会被清除，只有新监听运行，回调里的online永远是最新状态，就不会出现随机变回false的情况了。

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