无法摆脱：警告：无法对未安装的组件执行 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();  }我猜这与分离 firebase.detach 有关

Answer 1

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

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

您还需要设置_isMounted=falseincomponentWillUnmount()而不是_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();

  }