使用useEffect返回函数取消订阅watchPositionAsync

Question

使用react native with expo location作为移动应用程序，我想取消订阅Location.watchPositionAsync，它返回一个带有remove()方法的承诺来取消订阅。我在useEffect钩子中调用了该函数，但我不知道如何正确地返回一个已解析watchPositionAsync承诺的清理函数。

有什么建议吗？

import { useState, useEffect } from "react";
import { Text, View } from "react-native";
import * as Location from "expo-location";
export const GpsComponent = function () {
const [location, setLocation] = useState(null);
useEffect(() => {
const positionSubscription = async () => {
const positionSubscribe = await Location.watchPositionAsync(
{ accuracy: Location.LocationAccuracy.BestForNavigation },
(newLocation) => {
setLocation(newLocation);
}
);
return positionSubscribe;
};
/*return () => {
positionSubscription.remove();
console.log("Unsubscribed from WatchPositionAsync");
};*/
}, [setLocation]);
return (
<View>
<Text>{JSON.stringify(location)}</Text>
</View>
);
};

Answer 1

这将创建watchPositionAsync订阅，并传递正确的remove函数作为useEffect的清理。伪订阅最初是使用nop-remove函数创建的。

useEffect(() => {
// nop subscription. in case not successful
let subscription = { remove: () => {} }
// subscribe async function
const subscribe = async () => {
return await Location.watchPositionAsync(
{ accuracy: Location.LocationAccuracy.Highest },
(newLocation) => {
setLocation(newLocation)
}
)
}
// return subscription promise
subscribe()
.then(result => subscription = result)
.catch(err => console.warn(err))
// return remove function for cleanup
return subscription.remove
}, [])

Answer 2

我终于找到了一种使用useRef取消订阅watchPositionAsync的方法

import { useState, useEffect, useRef } from "react";
import { Text, View } from "react-native";
import * as Location from "expo-location";
export const GpsComponent = function () {
const [location, setLocation] = useState(null);
const unsubscribe = useRef(() => undefined);
useEffect(() => {
const subscribe= async () => {

const positionSubscription = await Location.watchPositionAsync(
{ accuracy: Location.LocationAccuracy.BestForNavigation },
(newLocation) => {
setLocation(newLocation);
}
);
unsubscribe.current=()=>{positionSubscription?.remove()}
};
return ()=>{unsubscribe.current()}
}, []);
return (
<View>
<Text>{JSON.stringify(location)}</Text>
</View>
);
};

在解析异步函数的promise之后，也可以使用对象并修改属性。