【问题标题】:Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak无法对未安装的组件执行 React 状态更新。这是一个空操作,但它表示内存泄漏
【发布时间】:2019-12-31 23:49:37
【问题描述】:

因此,即使我在 useEffect 挂钩中使用 clearInterval 来禁用 setTimeOut,虽然我需要超时才能完成,但我仍然收到以下错误消息:

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

我想另一个问题是,因为它是一个持续时间不超过一秒钟的 setTimeOut,我真的需要关心这个吗?我的代码如下:

  useEffect(() => {

    return () => {
      clearInterval(_isMounted);
    };
  },[urlReferer]);

  return (
    <User>
    {({ data: { me }, error }) => {
      if (error) return <Error error={error} />;

      const userID = me && me.id;
      const userType = (me && me.permissions.some(permission => ['GUEST_USER'].includes(permission))) ? 'GUEST_USER' : 'USER';

      return (
        ...
            <Form
              method="post"
              onSubmit={async e => {
                e.preventDefault();
                await signin();
                setState({
                  ...state,
                  name: '',
                  email: '',
                  password: '', 
                });
                /* Now redirect user to previous page */
                if (fromCart) {
                  Router.back();
                  _isMounted = setTimeout(() => { toggleCartOpen().catch(err => console.log(err.message)) }, 1000); // 1 second 1000
                } else {
                  Router.push({
                    pathname: '/',
                  })
                }
              }}
            >
    ```

【问题讨论】:

标签: reactjs react-hooks


【解决方案1】:

您可能应该使用clearTimeout 而不是clearInterval。正如 setTimeout 创建一个 Timeout 对象,这就是您正在使用的对象。与使用 setInterval 相比,您将使用 clearInterval

【讨论】:

    猜你喜欢
    • 2020-09-18
    • 2021-11-25
    • 2020-01-24
    • 2021-06-29
    • 2020-06-27
    • 2021-08-09
    • 2021-11-14
    • 2021-10-13
    相关资源
    最近更新 更多