javascript - 无法从 componentDidMount 调用函数

Question

在 componentDidMount() 内部，我正在检查 firebase.auth 以查看用户是否已通过身份验证，如果是，则应该调用多个函数(“this.functionName()”)，但这不起作用并导致黄色框: “[未处理的 promise 拒绝:类型错误:未定义不是对象(评估'this.loadChallenge')]”它们位于同一类下。

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

      //if user exists
      if (user) {
        console.log('Auth triggered.')
        this.loadChallenge()
        this.activateListener(user.uid)

        console.log('User is logged in ... profile.')
      } else {
        console.log('Not signed in.')
      }
    });
  }

Answer 1

使用“箭头函数”语法而不是 function 关键字来保留回调函数的 this 值。因此该函数将可以访问组件类上的方法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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

        //if user exists
        if (user) {
            console.log('Auth triggered.')
            this.loadChallenge()
            this.activateListener(user.uid)

            console.log('User is logged in ... profile.')
        } else {
            console.log('Not signed in.')
        }
    });
}