将 Firebase 用户对象传递给新组件

Posted 2023-02-22

【中文标题】将 Firebase 用户对象传递给新组件

【英文标题】：Passing Firebase User Object To New Component

【发布时间】：2019-07-27 14:36:24

【问题描述】：

我是 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】：

您正在 App 组件的 componentDidMount 中监听用户，然后将该数据传递到 <Home user=this.state.user/> 中的主组件中

这意味着您可以将 Home 组件中的用户对象引用为this.props.user。

您不需要在 Home 中再次调用 onAuthStateChanged 处理程序，您已经在 App 组件中这样做了。

希望对您有所帮助。