Javascript 反应：无法在组件中获取this.state.name

我是

react

js新手，我正在尝试在我的react-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);

类签名扩展了React.Component{
状态={
电子邮件：“”，
密码：“”，
名称：“”，
授权用户：“”，
}
getDetails=（e）=>{
firebase.auth（）.onAuthStateChanged（authUser=>{
作者
？this.setState（{authUser}）
：this.setState（{authUser:null}）；
});
}
render（）{
常数{
用户，
登录谷歌，
}=这是道具；
返回(
{
用户
? (
退出
获取详细信息
{this.state.authUser？this.state.authUser:this.state.name}
)
: (
使用谷歌登录
)
}
)
}
}
const firebaseAppAuth=firebaseApp.auth（）；
const loginAuth=firebaseApp.auth（）.signiWithEmailandPassword；
常量提供程序={
googleProvider:new firebase.auth.GoogleAuthProvider（），
};
使用FireBaseAuth导出默认值({
提供者，
firebaseAppAuth，
后勤人员，
})（签名）；

在此页面中，我可以通过

firebase

登录用户，但无法获得

onAuthstateChanged

。

---

我错过什么了吗？或者我应该在登录后存储任何变量吗？

在您共享的这部分代码中，

authUser

字段设置为组件状态：

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

但是没有必要这样做

withFirebaseAuth

高阶组件负责对用户及其包装的组件进行身份验证

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

{user&&user.displayName}

您在任何地方设置了

name

的值吗？我没有为它设置值，但是我在state中提到了它。感谢您的宝贵帮助。接下来，我想在另一个文件中提到的另一个组件中使用

authUser

状态。我可以这样做吗？或者我是否也需要在该文件中执行

onAuthStateChanged

？使用FireBaseAuthHOC包装需要验证的组件，并使用转发到包装组件的

user

道具