Передача пользовательского объекта Firebase новому компоненту - PullRequest
Новая
       8

Передача пользовательского объекта Firebase новому компоненту

1 голос
/ 06 марта 2019

Я новичок в React и Firebase, и я пытаюсь получить пользовательский объект, который заполняется после входа / регистрации в новый компонент, чтобы я мог получить к нему доступ и создать базу данных для каждого пользователя, однако я не могу похоже, что доступ к this.state.user из другого компонента. Вот мой код: 

    import React, { Component } from 'react';
import fire from './config/Fire';
import Login from './Login';
import Home from './Home';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      user: {},
    }
  }

  // After this component renders, we will call on auth lister which will begin auth listener process
  componentDidMount(){
    this.authListener();
  }

  authListener() {
    fire.auth().onAuthStateChanged((user) => {
      console.log(user);
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }

  render() {
    return (
      <div className="App">
        {this.state.user ? (<Home user={this.state.user}/>) : (<Login/>)}
      </div>
    );
  }
}

export default App;

и в моем новом компоненте у меня есть: 

componentDidMount(){
    fire.auth().onAuthStateChanged((user) => {
        if (this.props.user){
            console.log(this.props.user);
            // const userId = user.uid;
            // fire.database().ref(`users/${userId}`).set({
            //     username: '',
            //     age: ''
            // });
        } else {
            console.log('No user');
        }
    });
}

1 Ответ

0 голосов
/ 06 марта 2019

Вы слушаете пользователя в componentDidMount компонента App, затем передаете эти данные в домашний компонент в <Home user={this.state.user}/>

Это означает, что вы можете указать пользовательский объект внутри компонента Home как this.props.user.

Вам не нужно снова вызывать обработчик onAuthStateChanged внутри Home, вы уже сделали это в компоненте приложения.

Надеюсь, это поможет.

...