Реакция: Невозможно получить this.state.name внутри компонента

Question

Я новичок в react js и пытаюсь получить аутентификацию firebase в моем приложении реагировать на js.Я пытаюсь сделать следующее: если пользователь вошел в систему, он должен вернуть имя аутентифицированного пользователя или идентификатор электронной почты на моей странице возврата.Я пытался реализовать различные варианты в государстве, но я не могу получить его.Вот мой код

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 prop к Компоненту, который оборачивает.

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