プロジェクトReact-Nativeを作成しました。私のプロジェクトでは、ロケーションモジュールの追跡に「expo-location」を使用しています。setInterval関数(useEffectフック内)を使用して、10秒ごとに最後の場所を取得します。しかし、アプリをテストした後、以下に警告メッセージが表示されます。
警告メッセージから、問題はsetInterval関数にあると思います。しかし、私は修正しようとしましたが、間違ったコーディングを使用している可能性があるため、合格できません。
問題のコンポーネントは以下のとおりです。
import React, { useState, useEffect, useRef } from 'react';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import io from 'socket.io-client';
import BasedModel from '../models/BasedModel';
const objBasedModel = new BasedModel;
const Tracker = () => {
const ref = useRef();
const [trigger, setTrigger] = useState(Date.now());
const [trackLocation, setTrackLocation] = useState();
const [errorMsg, setErrorMsg] = useState('');
const submitLocation = (location) => {
const sendMessage = {
"latitude": location.coords.latitude,
"longitude": location.coords.longitude
};
ref.current.emit('emit location', sendMessage);
}
useEffect(() => {
const socket = io(objBasedModel.serverUrl);
ref.current = socket;
(async () => {
if (Platform.OS === 'android' && !Constants.isDevice) {
setErrorMsg(
'Oops, this will not work on Snack in an Android emulator. Try it on your device!'
);
return;
}
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
console.log("location: ", location);
setTrackLocation(location);
setInterval(() => {
submitLocation(location);
setTrigger(Date.now());
}, 10000);
})();
return () => socket.disconnect();
}, []);
return (
<React.Fragment />
);
}
export default Tracker;
「警告:マウントされていないコンポーネントでReact状態の更新を実行できません」という警告を解決するにはどうすればよいですか?setInterval関数から正しい方法で?
前もって感謝します、
クリーンアップ関数でsocket.disconnectを返すことに加えて、間隔も無効にする必要があります。setTimeoutとは対照的な間隔は、clearIntervalで停止されるまで呼び出されます。
useEffect(() => {
const socket = io(objBasedModel.serverUrl);
ref.current = socket;
let handle = undefined
(async () => {
if (Platform.OS === 'android' && !Constants.isDevice) {
setErrorMsg(
'Oops, this will not work on Snack in an Android emulator. Try it on your device!'
);
return;
}
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
console.log("location: ", location);
setTrackLocation(location);
handle = setInterval(() => {
submitLocation(location);
setTrigger(Date.now());
}, 10000);
})();
return () => {
socket.disconnect();
if(handle) clearInterval(handle);
}, []);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加