反应:无法在组件内部获取 this.state.name

Question

我是reactjs的新手，我正在尝试在我的反应js应用程序中获取firebase身份验证。我想做的是，如果用户已登录，那么它应该在我的返回页面中返回经过身份验证的用户名或电子邮件ID。我一直在尝试在该州实现各种选项，但是我无法得到它。 这是我的代码

class Signin extends React.Component {
state = {
email :'',
password:'',
name :'',
authUser:'',
}
getDetails = (e) => {
firebase.auth().onAuthStateChanged(authUser => {
authUser
? this.setState({ authUser }) 
: this.setState({ authUser: null });
});
}
render() {
const {
user,
signInWithGoogle,
} = this.props;
return (
<div>
{
user
? (
<div>
<button className="btn blue lighten-2 z-depth-0" onClick={this.logOut}>Sign out</button>
<button className="btn dark lighten-4 z-depth-0" onClick={this.getDetails}>GetDetails</button>
<input type = "text" className="dark lighten-2 z-depth-0" >
{this.state.authUser ? this.state.authUser :this.state.name}
</input>
</div>
)
: (
<button className="btn blue lighten-2 z-depth-0" onClick={signInWithGoogle}>Sign in with Google</button>
)
}
</div>
)
}
}
const firebaseAppAuth = firebaseApp.auth();
const loginAuth = firebaseApp.auth().signInWithEmailAndPassword;
const providers = {
googleProvider: new firebase.auth.GoogleAuthProvider(),
};
export default withFirebaseAuth({
providers,
firebaseAppAuth,
loginAuth,
})(Signin);

在这个页面中我可以通过firebase登录用户，但无法获得onAuthstateChanged。 我错过了什么吗？还是应该在登录后存储任何变量？

Answer 1

authUser字段在您共享的这部分代码的组件状态中设置：

firebase.auth().onAuthStateChanged(authUser => {
authUser
? this.setState({ authUser }) 
: this.setState({ authUser: null });
});

但没有必要这样做。

withFirebaseAuth高阶组件承担着对用户进行身份验证的责任，当它挂载并将user道具转发到它包装的组件时，它已经这样做了。

<input type = "text" className="dark lighten-2 z-depth-0" >
{user && user.displayName}
</input>