如何解决 setInterval 函数的警告 "Warning: Can't perform a React state update on an unmounted component."？

Question

我创建了我的项目 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 函数以正确的方式？

提前致谢，

Answer 1

我除了return和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);
  }, []);

如何解决 setInterval 函数的警告 "Warning: Can't perform a React state update on an unmounted component."？

How can I solve the warning "Warning: Can't perform a React state update on an unmounted component." from setInterval function?

setinterval

reactjs

react-native

expo

react-hooks