javascript - 如何在React中取消UseEffect内部的所有订阅

我收到此错误-无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消使用useEffect清理功能中的所有订阅和异步任务。
这是我的useEffect挂钩，我使用了一个称为mount的ref来检查组件是否已卸载，但是在卸载组件时仍然出现错误。 (显示错误大约需要一分钟)。

    useEffect(() => {
            if(mounted.current){
                if(mincounter === 0 && hrcounter > 0){
                    setHrcounter(hrcounter - 1);
                    setMincounter(60);
                    mincounter > 0 && setTimeout(() => setMincounter(mincounter - 1) , 1000*60)
                }else if (mincounter === 0 && hrcounter === 0){
                    submitHandler()
                }else{
                    mincounter > 0 && setTimeout(() => setMincounter(mincounter - 1) , 1000*60)
                }
            }
        return () => {
            mounted.current = false
            console.log('info tab unmounting', mounted.current);
        }
    }, [mincounter, hrcounter, submitHandler,setHrcounter,setMincounter]);

TIA

最佳答案

   const [subscriptions, setSubscriptions] = useState([]);

我通常将所有订阅存储在组件状态中，然后在卸载组件时调用它们(在useEffect挂钩的清理中)
像这样:

   useEffect(() => {
      const subscription1 = ...
      const subscription2 = ...
      // When you create subscriptions, just store them on state
      setSubscriptions([...subscriptions, subscription1, subscription2]);

      // Cleanup (Detach subscriptions)
      return () => subscriptions.forEach(subscription => subscription)

   },[])

关于javascript - 如何在React中取消UseEffect内部的所有订阅，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/63433073/