javascript - 在组件内 react :Unable to get this. state.name

Question

我是 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);

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

Answer 1

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

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

但没有必要这样做。

withFirebaseAuth 高阶组件负责对用户进行身份验证，已经does that when it mounts和 forwards a user prop到它包装的组件。

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