无法对未安装的组件执行 React 状态更新。这是一个空操作

Question

这是控制台中的警告，

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消 useEffect 清理函数中的所有订阅和异步任务。

这是我的代码

const [index, setIndex] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const refContainer: any = useRef();
  const [selectedIndex, setSelectedIndex] = useState(0);
  const navigation = useNavigation();

  useEffect(() => {
    refContainer.current.scrollToIndex({animated: true, index});
  }, [index]);

  const theNext = (index: number) => {
    if (index < departments.length - 1) {
      setIndex(index + 1);
      setSelectedIndex(index + 1);
    }
  };

  setTimeout(() => {
    theNext(index);
    if (index === departments.length - 1) {
      setIndex(0);
      setSelectedIndex(0);
    }
  }, 4000);

  const onRefresh = () => {
    if (refreshing === false) {
      setRefreshing(true);
      setTimeout(() => {
        setRefreshing(false);
      }, 2000);
    }
  };

我应该怎么做才能清理干净？

我尝试了很多操作，但警告并没有消失

Answer 1

setTimeout 需要在 useEffect 中使用。并在 return

中添加清除超时

  useEffect(() => {
    const timeOut = setTimeout(() => {
      theNext(index);
      if (index === departments.length - 1) {
        setIndex(0);
        setSelectedIndex(0);
      }
    }, 4000);

    return () => {
      if (timeOut) {
        clearTimeout(timeOut);
      }
    };
  }, []);

Answer 2

这是一个简单的解决方案。首先，您必须像这样删除所有计时器。

useEffect(() => {
   return () => remover timers here ;
},[])

然后把这个

import React, { useEffect,useRef, useState } from 'react'

const Example = () => {
    const isScreenMounted = useRef(true)
    useEffect(() => {
        isScreenMounted.current = true
        return () =>  isScreenMounted.current = false
    },[])
       
    const somefunction = () => {
        // put this statement before every state update and you will never get that earrning
        if(!isScreenMounted.current) return;
        /// put here state update function
    }
    return null
}

export default Example;

无法对未安装的组件执行 React 状态更新。这是一个空操作

Can't perform a React state update on an unmounted component. This is a no-op

reactjs

react-native

use-effect

use-state