Firebase Auth的OnAuthState中的React的SetState已更改，导致SetState未定义

Question

//为什么这个问题不是（如何在回调中访问正确的“this”？）：我的问题是一个特定于反应的问题，访问者可能不会在精神上将上述链接中提出的问题与我正在努力解决的问题联系起来。

我正在尝试存储Firebase auth的onAuthStateChanged函数返回的用户数据，并将该数据存储在状态中，以便在我的react应用程序中使用它。在我的应用程序中，我有以下监听器：

  componentDidMount() {

    firebase.auth().onAuthStateChanged(function(user) {

      var theUser;

      if (user) {
        console.log("user is logged in!");

        theUser = user;

        this.setState({
          session: theUser
        });
        // User is signed in.
      } else {
        // No user is signed in.
        console.log("user is not logged in!")
        theUser = null;
      }
  }
}

但是我得到错误“TypeError：this.setState不是一个函数”。我尝试过将“this”绑定到conceptDidMount，但无济于事。

Answer 1

JavaScript中的“this”可能有点难，你必须确定你知道它指的是什么。因为“this”在“function(user)”的内部，所以它是相对于那个函数的...而不是整个应用程序。我必须看到你的全部代码才能确定，但是你可以做类似这样的事情来保存你的应用程序的一个引用并使用它。

 let myApp = this;

 componentDidMount() {

    firebase.auth().onAuthStateChanged(function(user) {

      var theUser;

      if (user) {
        console.log("user is logged in!");

        theUser = user;

        myApp.setState({
          session: theUser
        });
        // User is signed in.
      } else {
        // No user is signed in.
        console.log("user is not logged in!")
        theUser = null;
      }
  }
}

Answer 2

正如@Jason Byrne所说，指定谁是“这个”似乎是一个问题，你可以遵循他在答案中提到的方法。

另一种现代方法是使用ES6箭头函数，因为它们在词法范围中工作，因此this取决于编写它的“位置”（这是您的类）：

componentDidMount() {

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

      var theUser;

      if (user) {
        console.log("user is logged in!");

        theUser = user;

        this.setState({
          session: theUser
        });
        // User is signed in.
      } else {
        // No user is signed in.
        console.log("user is not logged in!")
        theUser = null;
      }
  }
}

看看这里:如何在回调中访问正确的“this ”?