我正在制作一個“尋寶”小徑應用程式。用戶可以去一個位置，當他們到達那個位置時，就會發生一個動作。為了監控用戶位置，我使用“react-native-geolocation-service”中的 Gelocation.watchposition()。
興趣點（trailLocation）來自我們的 API，我用它設定了“trailLocation”狀態，它正確更新并且一切看起來都很好。(initialTrailLocation passed from previous screen)
const [trailLocation, setTrailLocation] = useState(initialTrailLocation);
/**
* Function to get the next trail location
*/
let getNextLocation = async () => {
setIsLoading(true);
const credentials = await Keychain.getGenericPassword();
await axios.get(BACKEND_URL 'api/v1/trails/' trail.id '/user/' credentials.username '/next-location?include=trail_location_ar_object.ar_object.ar_object_resources', {
headers: {
Authorization: 'Bearer ' credentials.password,
},
},
)
.then(response => {
setTrailLocation(response.data.data.trail_location);
setIsLoading(false);
setUserWithinRange(false);
})
.catch(error => {
console.log(error);
});
};
/**
* Function called when the position changes
*/
function newPositionHandler(data) {
console.log("new position handler");
let radius = 1000;
let ky = 40000 / 360;
console.log(trailLocation);
let kx = Math.cos((Math.PI * trailLocation.lat) / 180.0) * ky;
let dx = Math.abs(trailLocation.lon - data.coords.longitude) * kx;
let dy = Math.abs(trailLocation.lat - data.coords.latitude) * ky;
setDistance(Math.sqrt(dx * dx dy * dy));
console.log(Math.sqrt(dx * dx dy * dy));
console.log('-------------------');
if(Math.sqrt(dx * dx dy * dy) <= radius / 1000) {
setUserWithinRange(true);
} else {
setUserWithinRange(false)
}
};
/** Function called to initialise the watch position functionality */
async function watchPosition() {
console.log("watch position");
Geolocation.watchPosition((data) => newPositionHandler(data), (error) => console.log(error),{
enableHighAccuracy: false,
timeout: 10000,
maximumAge: 1000,
distanceFilter: 5,
},
);
};
但是，當觸發 watchposition 的成功函式時，它使用“trailLocation”狀態的原始值，因此計算出用戶位置和新的 trailLocation 點之間的錯誤距離。我不明白為什么這是因為所有其他功能都使用正確的狀態值。我記錄了這些值，我可以使用初始狀態清楚地看到它，但所有其他操作都使用當前狀態，并且新的 trailLocation 引數顯示在螢屏上。
任何幫助將不勝感激。我可以提供更多細節，這是我的第一個問題，所以讓我放松一下；）
謝謝
uj5u.com熱心網友回復：
您的函式中的資料已過時 - 通常稱為“陳舊的閉包”。當您撰寫Geolocation.watchPosition((data) => newPositionHandler(data), ...時，將使用當時存在的狀態創建函式。當函式運行時，這些資料已經過時了。
您可以在此相關問題中閱讀有關此問題解決方案的更多資訊：如何解決 React Hook Closure 問題？
uj5u.com熱心網友回復：
- 洗掉等待
axios.get(BACKEND_URL 'api/v1/trails/' trail.id '/user/' credentials.username '/next-location?include=trail_location_ar_object.ar_object.ar_object_resources', {
headers: {
Authorization: 'Bearer ' credentials.password,
},
},
)
.then(response => {
setTrailLocation(response.data.data.trail_location);
setIsLoading(false);
setUserWithinRange(false);
})
.catch(error => {
console.log(error);
});
或 2。
let getNextLocation = async () => {
setIsLoading(true);
const credentials = await Keychain.getGenericPassword();
const response = await axios.get(BACKEND_URL 'api/v1/trails/' trail.id '/user/' credentials.username '/next-location?include=trail_location_ar_object.ar_object.ar_object_resources', {
headers: {
Authorization: 'Bearer ' credentials.password,
},
},
)
if(response?.data?.data?.trail_location){
setTrailLocation(response.data.data.trail_location);
}
setIsLoading(false);
setUserWithinRange(false);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469250.html