正在尝试通过React应用程序中的this.setState呈现Firebase Auth用户详细信息，但未定义

Question

我正试图通过Firebase Auth在"配置文件"页面上呈现用户的详细信息，以便他们在需要时进行更新。

我正试图在"componentDidMount"中这样做，所以在页面加载时，使用state。但是，我尝试运行的函数将"this.setState"调用返回为"undefined"。

这是错误消息：

未处理的拒绝(TypeError(：未定义不是对象(评估"this.setState"(

有没有一种方法可以重构我的代码，以便使用firebase.auth.onAuthStateChanged在页面加载时呈现？

这是我的组件代码：

class Profile extends Component {
constructor(props) {
super(props)
this.state = {
displayName: "",
email: ""
}
}
componentDidMount() {
firebase.auth().onAuthStateChanged(function(user) {
if (!user) {
this.setState({
displayName: "",
email: ""
})
} else {
this.setState({
displayName: user.displayName,
email: user.email
})
}
});
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value})
}
render() {
return (
<input className="profile-info-type" type="text" name="displayName" value={this.state.displayName || ''} onChange={this.onChange} />
<input className="profile-info-type" type="email" name="email" value={this.state.email || ''} onChange={this.onChange} />
)
}
}

任何建议都将不胜感激！

Answer 1

您应该为回调使用一个箭头函数，它将在外部范围中保留this的值。

firebase.auth().onAuthStateChanged(user => {
// this.setState()
})