useEffect 中的异步处理

Question

我正在使用自定义挂钩创建 3 秒后自动注销的行为。我从我的主要组件调用这个挂钩，并使用 isLogin 决定登录状态。设置凭据后，调用 setLogin 函数，并且由于 useEffect setTimeout 被加载到内存中。问题是，3 秒后我收到此错误，

无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏

如果您认为这不是处理此类情况的正确方法，请指导我。

const [isLogin, setLogin] = useState(someValue);

 useEffect(() => {
    if (tokenExist && notExpireYet) {
      setTimeout(() => remValue(), 3000);
    }
  }, [isLogin]);

Answer 1

问题是您的 setTimeout 调用即使在组件卸载后也会被调用。为了在依赖项更改之间正确清理效果，您应该 return 一个清理函数。

在你的情况下，它会是这样的：

const [isLogin, setLogin] = useState(someValue);

useEffect(() => {
  if (tokenExist && notExpireYet) {
    const id = setTimeout(() => remValue(), 3000);
    return () => clearTimeout(id);
  }
  
}, [isLogin]);

这将确保您的效果不会运行当组件不再存在时。

useEffect 中的异步处理

Asynchronous handling in useEffect

asynchronous

reactjs

use-effect