Firebase登录后,在componentDidMount方法内反应本地“ this.setState不是函数”错误

时间:2019-03-20 18:59:47

标签: firebase react-native firebase-authentication

有人可以告诉我为什么我得到this.setState在下面的代码中未定义错误吗?

componentDidMount(){
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            this.setState({user:user});
            console.log(user.uid);
        } else {
            this.setState({user:null});
            console.log("logged out");
        }
      });
}

我也尝试了不同的方法:

componentDidMount(){
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            //this.setState({user:user});
            this.sState(user);
            console.log(user.uid);
        } else {
            this.setState({user:null});
            console.log("logged out");
        }
      });
}
sState(user){
    this.setState({user:user});
}

对于上述情况,错误为 this.sState不是函数

我检查了类似的问题,因此它们似乎对我的情况没有帮助。 谢谢。

1 个答案:

答案 0 :(得分:1)

使用箭头功能或将onAuthStageChanged绑定到组件

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        //this.setState({user:user});
        this.sState(user);
        console.log(user.uid);
    } else {
        this.setState({user:null});
        console.log("logged out");
    }
});

箭头功能会自动与此绑定,普通功能不会

Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?

编辑 使用绑定功能。基本上,在调用函数时,将'this'运算符分配给bind参数。

componentDidMount(){
    firebase
       .auth()
       .onAuthStateChanged(this.authStateChangeHandler.bind(this));
}

authStateChangeHandler(user) {
    if (user) {
        this.setState({user:user});
        console.log(user.uid);
     } else {
        this.setState({user:null});
        console.log("logged out");
     }
}