Question

//为什么这个问题不是（How to access the correct `this` inside a callback?）的重复：我的问题是一个特定于反应的问题，访问者可能无法在上面链接中提出的问题和我所提出的问题之间进行精神上的联系我在挣扎着。

我正在尝试存储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”绑定到componentDidMount毫无用处。

Answer 1

JavaScript中的“ this”可能有点困难，您必须确保您知道这是指什么。因为“ this”在“ function（user）”内部，所以它与该函数有关……而不是整个应用程序。我必须确保看到完整的代码，但是您可以执行类似的操作来保留应用程序的引用，并改用它。

val phone = contactDAO.phones?.find {
    val phone = it.content
    phone != null && !phone.startsWith("+")
} != null
if (phone) {...}

Answer 2

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

另一种现代方法是使用ES6 arrow functions，因为它们在lexical scope中工作，因此this取决于其写入的“位置”（即您的class ）：

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;
      }
  }
}

也可以在这里查看：How to access the correct `this` inside a callback?

Firebase Auth的onAuthStateChanged中的React的SetState导致setState未定义

2 个答案: