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>

React：无法在组件内部获取this.state.name

1 个答案: