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

Can't get rid of: Warning: Can't perform a React state update on an unmounted component

完整警告消息:警告:无法对未安装的组件执行 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();
  }

我猜这与分离有关 firebase.detach

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

在更新任何状态变量之前,您需要检查 _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();
  }