具有onAuthStateChanged的Firebase开关标头选项 [英] Firebase switch header option with onAuthStateChanged

问题描述

很抱歉，如果我的问题已经提出.我是反应的初学者，我真的很想学习如何做并理解.我在React.JS项目上使用Firebase，并且无论用户是否连接，我都希望切换标题的一部分.

I'm sorry if my question has already asked. I am a beginner on react and I really want to learn how to do this and understand. I use Firebase on my React.JS project and i want switch a part of header when the user has connected or not.

我认为使用条件渲染，但是在(if)之后的firebase函数上，不允许我执行setState()..或者我出错了

I think using the conditional-rendering but on the firebase function after the (if) does not allow me to do setState().. or i have an error

因此，如果我们可以帮助我或者给我跟踪寻找答案的位置，我将非常高兴！

So I would be very happy if we could help me or give me a track of where to look for the answers !

class Header extends Component {

state={
  connected: null
}

render(){

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {


    } else {


    }
  });

  return (


<div className="backgroundheader">

<div className="liensheader">
  <a href="/" className="lili" style={{textDecoration: "none"}}>Home</a>
  <a href="/event" className="lili" style={{textDecoration: "none"}}>Manifestations</a>
  <a href="/commerces" className="lili" style={{textDecoration: "none"}}>Commerces</a>
  <a href="/tips" className="lili" style={{textDecoration: "none"}}>Tips</a>
</div>

{/* options header when the user is disconnect */}
{/* <Deader /> */}

{/* options header when the user is connected */}
{/* <Ceader /> */}

</div>
  );
  }
};
export default Header;

谢谢你，对不起我的英语不好:/

Thank's you and sorry for my bad english :/

推荐答案

onAuthStateChanged 异步触发，因此您不能在 render 方法中直接使用它.每当遇到这种情况时，解决方案是将异步值放入状态，然后在 render 方法中使用该状态.

The onAuthStateChanged fires asynchronously, so you can't directly use it inside your render method. Whenever you have a situation like this, the solution is to put the asynchronous value into the state, and then use the state in the render method.

所以像这样:

class Header extends Component {
  state={
    connected: null
  }
  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
      setState({ user: user });
    });    
  }
  render(){
    return (
<div className="backgroundheader">

<div className="liensheader">
  <a href="/" className="lili" style={{textDecoration: "none"}}>Home</a>
  <a href="/event" className="lili" style={{textDecoration: "none"}}>Manifestations</a>
  <a href="/commerces" className="lili" style={{textDecoration: "none"}}>Commerces</a>
  <a href="/tips" className="lili" style={{textDecoration: "none"}}>Tips</a>
</div>
{ user ? <Deader /> : <Ceader /> }
</div>
  );
  }
};
export default Header;

另请参阅:

• Firebase存储:将图像下载到React map中的img src并放入其中.异步加载数据的同样问题，但是要在Cloud Storage中获取图像的下载URL.
• 如何更新将Firebase数据实时传输到React应用程序.这突出了异步加载数据的相同问题，但是现在需要从实时数据库中获取JSON数据.

• Firebase storage: download images to and put to img src in React map. The same problem of asynchronously loaded data, but then with getting the download URL of images in Cloud Storage.
• How to update Firebase data to the React application in realtime. This highlights the same problem of asynchronously loaded data, but now with getting JSON data from the Realtime Database.

这篇关于具有onAuthStateChanged的Firebase开关标头选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！