React Native 使用效果清理问题

wztqucjr 于 2022-11-25 发布在 React

关注(0)|答案(2)|浏览(114)

以下代码用作RN应用程序中的离线监视器-其主要用于在连接断开时显示警告。

export default function InternetCheck() {
  const [isConnected, setIsConnected] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    //Intial status

    NetInfo.fetch().then(state => {
      if (state.isInternetReachable == false) {
        setIsConnected(state.isInternetReachable);
      }
    });
    //Internet connection listener
    NetInfo.addEventListener(state => {
      setIsConnected(state.isInternetReachable);
    });
  }, []);

我在控制台中收到以下错误-
警告：无法对已卸载的组件执行React状态更新。这是一个无操作，但它指示应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清除函数中的所有订阅和异步任务。
有没有人能解释一下如何在这个场景中应用清理函数？我已经通读了其他各种问题，但不能理解逻辑方法。

react-native

来源：https://stackoverflow.com/questions/74560136/use-effect-cleanup-issue

2条答案

按热度按时间

izj3ouym1#

你可以使用一个可变的布尔变量来跟踪你的渲染周期是否已经开始清理。如果已经开始，那么就停止更新（不再存在的）状态。另外，一定要清理NetInfo订阅。下面是一个例子：

export default function InternetCheck () {
  const [isConnected, setIsConnected] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    let cleanupStarted = false;

    // Initial status

    NetInfo.fetch().then(state => {
      if (state.isInternetReachable == false) {
        if (!cleanupStarted) setIsConnected(state.isInternetReachable);
      }
    });

    // Internet connection listener
    const unsubscribe = NetInfo.addEventListener(state => {
      if (!cleanupStarted) setIsConnected(state.isInternetReachable);
    });

    return () => {
      cleanupStarted = true;
      unsubscribe();
    };
  }, []);
}

赞(0）回复(0）举报 2022-11-25

8wtpewkr2#

您好，您需要从useEffect函数添加返回回调清除
像这样：

export default function InternetCheck() {
      const [isConnected, setIsConnected] = useState(false);
      const [mounted, setMounted] = useState(false);
    
      useEffect(() => {
        //Intial status
    
        NetInfo.fetch().then(state => {
          if (state.isInternetReachable == false) {
            setIsConnected(state.isInternetReachable);
          }
        });
        //Internet connection listener
        NetInfo.addEventListener(state => {
          setIsConnected(state.isInternetReachable);
        });
//----> add the removeEventListener 
return ()=>{
NetInfo.removeEventListener(...)
......
}
 }, []);

赞(0）回复(0）举报 2022-11-25

我来回答

React Native 使用效果清理问题

2条答案

相关问题

热门标签

最新问答