如何解决警告“警告：无法在未安装的组件上执行 React 状态更新”从 setInterval 函数？

如何解决如何解决警告“警告：无法在未安装的组件上执行 React 状态更新”从 setInterval 函数？

我创建了我的项目 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之外，还需要禁用interval。与 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);
  },[]);