有人可以告诉我为什么我得到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不是函数。
我检查了类似的问题,因此它们似乎对我的情况没有帮助。 谢谢。
答案 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");
}
}