Question

有人可以告诉我为什么我得到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不是函数。

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

Answer 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");
     }
}

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

1 个答案: