地理位置clearWatch(watchId)不会停止位置跟踪(React Native)

Question

我正在尝试创建一个简单的位置跟踪器示例，但遇到了以下情况。我的基本目标是通过按下开始/结束按钮来切换位置手表。我正在通过实现自定义的react钩子来分离关注点，然后在应用程序组件中使用该钩子

useWatchLocation.js

import {useEffect, useRef, useState} from "react"
import {PermissionsAndroid} from "react-native"
import Geolocation from "react-native-geolocation-service"
const watchCurrentLocation = async (successCallback, errorCallback) => {
if (!(await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION))) {
errorCallback("Permissions for location are not granted!")
}
return Geolocation.watchPosition(successCallback, errorCallback, {
timeout: 3000,
maximumAge: 500,
enableHighAccuracy: true,
distanceFilter: 0,
useSignificantChanges: false,
})
}
const stopWatchingLocation = (watchId) => {
Geolocation.clearWatch(watchId)
// Geolocation.stopObserving()
}
export default useWatchLocation = () => {
const [location, setLocation] = useState()
const [lastError, setLastError] = useState()
const [locationToggle, setLocationToggle] = useState(false)
const watchId = useRef(null)
const startLocationWatch = () => {
watchId.current = watchCurrentLocation(
(position) => {
setLocation(position)
},
(error) => {
setLastError(error)
}
)
}
const cancelLocationWatch = () => {
stopWatchingLocation(watchId.current)
setLocation(null)
setLastError(null)
}
const setLocationWatch = (flag) => {
setLocationToggle(flag)
}
// execution after render when locationToggle is changed
useEffect(() => {
if (locationToggle) {
startLocationWatch()
} else cancelLocationWatch()
return cancelLocationWatch()
}, [locationToggle])
// mount / unmount
useEffect(() => {
cancelLocationWatch()
}, [])
return { location, lastError, setLocationWatch }
}

App.js

import React from "react"
import {Button, Text, View} from "react-native"
import useWatchLocation from "./hooks/useWatchLocation"
export default App = () => {
const { location, lastError, setLocationWatch } = useWatchLocation()
return (
<View style={{ margin: 20 }}>
<View style={{ margin: 20, alignItems: "center" }}>
<Text>{location && `Time: ${new Date(location.timestamp).toLocaleTimeString()}`}</Text>
<Text>{location && `Latitude: ${location.coords.latitude}`}</Text>
<Text>{location && `Longitude: ${location.coords.longitude}`}</Text>
<Text>{lastError && `Error: ${lastError}`}</Text>
</View>
<View style={{ marginTop: 20, width: "100%", flexDirection: "row", justifyContent: "space-evenly" }}>
<Button onPress={() => {setLocationWatch(true)}} title="START" />
<Button onPress={() => {setLocationWatch(false)}} title="STOP" />
</View>
</View>
)
}

我已经在网上搜索了多个例子，上面的代码应该可以工作。但问题是，当按下停止按钮时，即使我调用Geolocation.clearWatch(watchId(.，位置仍然会不断更新

我封装了Geolocation调用来处理位置权限和其他可能的调试内容。在useWatchLocation内使用useRef钩子保存的watchId值似乎无效。我的猜测是基于试图在Geolocation.clearWatch(watchId(之后立即调用Geolocation.stopObserving((。订阅停止，但我收到警告：

使用现有订阅调用stopObserving。

所以我认为原始订阅没有被清除。

我错过了什么/做错了什么？

编辑：我找到了解决方案。但由于isMounted模式通常被认为是反模式：有人有更好的解决方案吗？

Answer 1

好的，isMounted模式解决了问题。isMounted.current设置为locationToggle效果为true，cancelLocationWatch内部为false:

const isMounted = useRef(null)
...

useEffect(() => {
if (locationToggle) {
isMounted.current = true              // <--
startLocationWatch()
} else cancelLocationWatch()
return () => cancelLocationWatch()
}, [locationToggle])

...    
const cancelLocationWatch = () => {
stopWatchingLocation(watchId.current)
setLocation(null)
setLastError(null)
isMounted.current = false               // <--
}

并检查了装载/卸载效果、成功和错误回调：

const startLocationWatch = () => {
watchId.current = watchCurrentLocation(
(position) => {
if (isMounted.current) {                // <--
setLocation(position)
}
},
(error) => {
if (isMounted.current) {                // <--
setLastError(error)
}
}
)
}