无法摆脱：警告：无法对未安装的组件执行 React 状态更新

Question

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

此警告不会持续显示，它会在感觉时显示。应用刚启动时的大多数时间。

export default class something extends React.Component {
  _isMounted = false;
  state = {
    
  };

componentDidMount() {
    this._isMounted = true;
    firebase = new Fire((error, user) => {
      if (error) {
        return alert('something something something something');
      }

      firebase.getLists((lists) => {
        this.setState({ lists, user }, () => {
            this.setState({ loading: false });
        });
      });
      this.setState({ user });
    });
  }

componentWillUnmount() {
    this._isMounted = true;
    firebase.detach();
  }

这是在另一个包含所有 firebase 代码的文件中

detach() {
    this.unsubscribe();
  }

我猜这与 detach firebase.detach 有关

Answer 1

您的代码需要进行一些小的更新才能正常工作。

在更新任何状态变量之前，您需要检查 _isMounted 是否为 true。

您还需要在componentWillUnmount() 中设置_isMounted=false 而不是_isMounted=true。

查看下面的更新代码：

export default class something extends React.Component {
  _isMounted = false;
  state = {
    
  };

componentDidMount() {
    this._isMounted = true;
    firebase = new Fire((error, user) => {
      if (error) {
        return alert('something something something something');
      }

      firebase.getLists((lists) => {
        if (this._isMounted){
          this.setState({ lists, user }, () => {
            this.setState({ loading: false });
          });
        }
      });
      if (this._isMounted){
        this.setState({ user });
      }
    });
  }

componentWillUnmount() {
    this._isMounted = false;
    firebase.detach();
  }