Meteor.logout() 在 React 中导致内存泄漏

Question

当我注销我的流星应用程序时，出现内存泄漏错误。这似乎发生在大约 50% 的时间里，我无法弄清楚我在这里做错了什么。谁能解释一下我的方法有什么问题。

错误信息

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

应用详情

Metoer、React、React-Router V4

路径：LogoutButton.jsx

class LogoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logoutRedirect: false
    };

    this.handleLogout = this.handleLogout.bind(this);
  }

  handleLogout = e => {
    e.preventDefault();

    Meteor.logout(err => {
      if (err) {
        console.log('err', err);
      } else {
        this.setState({ logoutRedirect: true });
      }
    });
  };

  render() {
    const logoutRedirect = this.state;

    if (logoutRedirect.logoutRedirect) {
      return <Redirect to="/" />;
    }

    return (
      <button
        type="button"
        className="btn btn-link dropdown-item text-dark"
        onClick={this.handleLogout}
      >
        <FontAwesomeIcon icon={faSignOutAlt} className="mr-2 text-dark" />
        Logout
      </button>
    );
  }
}

Answer 1

因此，我将为您分解此内容，以了解错误是什么，遇到错误的原因以及解决方案的一些可能想法。

您的组件LogoutButton 正在运行它已卸载（完全未渲染）但正试图触发组件内的状态更改的情况。这通常只是糟糕的状态流，通常源于执行一些需要时间的异步操作，然后在没有什么可以触发 setState 时触发 setState。

看看你的代码，听起来你想要做的是这样的：

1. 你有一个<LogoutButton /> 渲染到屏幕上，当一个 用户点击它，他们应该被重定向。
2. 当用户点击按钮时，它会触发handleLogout，它显式调用Meteor.logout（我假设这是正式将用户从会话中注销），然后继续调用setState。

很可能，Meteor.logout 在这里有一些副作用，所以你的LogoutButton 不再被挂载或渲染。当您的组件到达需要调用setState 的步骤时，您的组件已卸载（可能某些父组件已决定不再显示它，等等）。

我对 React-Router 知之甚少（这是我假设 <Redirect /> 的来源，但它看起来像 history.push 或将名为 push 的道具传递给 <Redirect /> 是值得考虑的事情。见this article.

Answer 2

如果有人能对此有所了解，我将不胜感激。问题似乎来自我如何处理经过身份验证的路由。我已经用下面的代码解决了这个错误，但是，我不确定为什么会这样，所以我无法给出解释。解决方案是更改操作顺序。首先，更新状态以重定向路由，然后注销用户。

class LogoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logoutRedirect: false
    };

    this.handleLogout = this.handleLogout.bind(this);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleLogout);
  }

  handleLogout = e => {
    e.preventDefault();

    this.setState({ logoutRedirect: true });
    Meteor.logout(err => {
      if (err) {
        console.log('err', err);
      }
    });
  };

  render() {
    const logoutRedirect = this.state;

    if (logoutRedirect.logoutRedirect) {
      return <Redirect to="/" />;
    }

    return (
      <button
        type="button"
        className="btn btn-link dropdown-item text-dark"
        onClick={this.handleLogout}
      >
        <FontAwesomeIcon icon={faSignOutAlt} className="mr-2 text-dark" />
        Logout
      </button>
    );
  }
}

Answer 3

---

step1 .meteor 文件夹添加这个包： 帐户-ui 帐户-谷歌 帐户密码 账户基础 标准：帐户-ui 用户帐户：引导 // 第2步 ： 文件夹：导入/启动 创建文件夹名称“accounts”添加accounts-config.js 并粘贴代码。 将 FlowRouter.go('/account/sign-in') 更改为 第 3 步：为您的按钮添加功能。粘贴这个 let handleLogout = () => { AccountsTemplates.logout() }

const LogoutButton = () => {
   
  let handleLogout = event => {
    event.preventDefault()
    AccountsTemplates.logout()
  }

  return (
    <button
      type="button"
      className="btn btn-link dropdown-item text-dark"
      onClick={handleLogout}
    >
      <FontAwesomeIcon icon={faSignOutAlt} className="mr-2 text-dark" />
      Logout
    </button>
  )
}

注意：我正在使用帐户库。

// Configure Accounts Templates default
AccountsTemplates.configure({
  enablePasswordChange: true,
  sendVerificationEmail: true,
  enforceEmailVerification: true,
  showForgotPasswordLink: true,
  negativeValidation: true,
  positiveValidation: true,
  negativeFeedback: true,
  positiveFeedback: true,
  // Proceed to main page as you log out..
  onLogoutHook: () => {
    <Redirect to="/" />
  }
})