Question

我正在尝试删除此警告：

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

这是我的React.js代码：

constructor(props) {

    super(props);

    this.state = { 
      firstLogin: null
    };

}

componentWillMount() {

    firebase.auth().onAuthStateChanged(user => {

       if (user) {
         firebase.database().ref('/users/' + firebase.auth().currentUser.uid).limitToFirst(1).once('value').then((snapshot) => {
      snapshot.forEach((childSnapshot) => {
      this.setState({firstLogin: snapshot.val().infos.firstLogin});
        });
       });
      } 
      else {
        this.setState({firstLogin: null});
      }
    });
}

componentWillUnmount() {
    this.setState({firstLogin: null});
}

当我尝试console.log时，componentWillUnmount（）函数：

componentWillUnmount() {
    console.log("component unmount");
    this.setState({firstLogin: null});
}

我意识到组件安装完成后就会立即调用该函数... 所以我有这个警告。

你能帮我吗？

谢谢

---编辑---

我删除了componentWillUnmount，但警告仍然在这里。

constructor(props) {

    super(props);

    this.state = { 
      firstLogin: null
    };

}

componentWillMount() {

    firebase.auth().onAuthStateChanged(user => {

       if (user) {
         firebase.database().ref('/users/' + firebase.auth().currentUser.uid).limitToFirst(1).once('value').then((snapshot) => {
      snapshot.forEach((childSnapshot) => {
      this.setState({firstLogin: snapshot.val().infos.firstLogin});
        });
       });
      } 
      else {
        this.setState({firstLogin: null});
      }
    });
}

Answer 1

您应该保留一个变量以指示该组件仍在安装中。

constructor(props) {

    super(props);

    this.state = { 
      firstLogin: null
    };
    this._isMounted = false;
}

componentDidMount() {
  this._isMounted = true;
}

componentWillUnmount() {
  this._isMounted = false;
}

componentWillMount() {

    firebase.auth().onAuthStateChanged(user => {

       if (this._isMounted && user) {
         firebase.database().ref('/users/' + firebase.auth().currentUser.uid).limitToFirst(1).once('value').then((snapshot) => {
      snapshot.forEach((childSnapshot) => {
      this.setState({firstLogin: snapshot.val().infos.firstLogin});
        });
       });
      } 
      else if (this._isMounted){
        this.setState({firstLogin: null});
      }
    });
}

Answer 2

尝试调用componentDidMount（）而不是componentWillMount（）

挂载时被调用componentWillUnmount（）-React.js

2 个答案: