(ReactJS) Как мне считывать пользовательские данные от пользователей аутентификации firebase?

#javascript #reactjs #firebase #firebase-authentication

#javascript #reactjs #firebase #firebase-аутентификация

Вопрос:

Я хочу отобразить текущую (зарегистрированную) электронную почту пользователя, которая была сохранена при аутентификации firebase. Как мне их получить? Я хочу сохранить его в переменной this.state.email. Вот мой код на данный момент:

 import React from 'react'
import fire from './firebase'


class Home extends React.Component{

    constructor(props){
        super(props)
        this.logout = this.logout.bind(this)
        this.state = {
            email: ''
        }
     }
    logout(){
        fire.auth().signOut();
    }
    render(){
        return(
            <div>
                <h1>You are home</h1>
                <button onClick = {this.logout}>Sign Out</button>
                <p>{this.state.email}</p>
            </div>
        );
    }
}
export default Home

Ответ №1:

вы можете получить электронную почту зарегистрированных пользователей внутри вашего прослушивателя authStateChanged. вот так.

 import firebase from "YOUR_FIREBASE_CONFIG_PATH"; 


componentDidMount = () => {
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            console.log(user.email).  // this will print the email if user have any
            this.setState({
                email: user.email,
            });
        }
    });
};

1. Спасибо 🙂 Еще один вопрос, если вы не возражаете. Как только я получу это электронное письмо, как мне экспортировать его на другую страницу? экспорт this.state.email не работает

2. вы можете передать данные его дочернему компоненту с помощью реквизитов. если ваш targetcomponent не является прямым дочерним элементом вашего текущего компонента, вы можете использовать некоторую библиотеку управления состоянием, такую как redux

Ответ №2:

Выполните вызов API внутри componentDidMount и сохраните данные текущего пользователя-электронная почта

 componentDidMount() {
  firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    const { email } = user;
    this.setState({email});
    } 
  });
}

1. Спасибо за ваш ответ. Еще один вопрос, если вы не возражаете. Как только я получу это электронное письмо, как мне экспортировать его на другую страницу? экспорт this.state.email не работает

2. @AdvaitDhingra вы можете передать дочерним компонентам или сохранить где-нибудь в общих файлах для использования в вашем проекте.