Javascript onAuthStateChanged的Firebase交换机标头选项

如果我的问题已经问过了，我很抱歉。 我是react的初学者，我真的很想学习如何做到这一点并理解它。 我在React.JS项目中使用Firebase，我希望在用户连接或未连接时切换标题的一部分

我认为在（if）之后使用条件渲染但在firebase函数上不允许执行setState（）。。或者我有个错误

因此，如果我们能帮助我，或者给我一个在哪里寻找答案的线索，我将非常高兴

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;

类头扩展组件{
陈述={
已连接：空
}
render（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
}否则{
}
});
返回(
{/*用户断开连接时的选项标头*/}
{/*  */}
{/*用户连接时的选项头*/}
{/*  */}
);
}
};
导出默认标题；

---

感谢您并为我的糟糕英语感到抱歉：/

onAuthStateChanged异步启动，因此您不能在

render

方法中直接使用它。每当遇到这种情况时，解决方案是将异步值放入状态，然后在

render

方法中使用该状态

比如：

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;

类头扩展组件{
陈述={
已连接：空
}
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
setState（{user:user}）；
});    
}
render（）{
返回(
{用户？：}
);
}
};
导出默认标题；

另见：

• 。异步加载数据也存在同样的问题，但随后在云存储中获取图像的下载URL
• 。这突出了异步加载数据的相同问题，但现在是从实时数据库获取JSON数据

---

onAuthStateChanged异步激发，因此您不能在

渲染

方法中直接使用它。每当遇到这种情况时，解决方案是将异步值放入状态，然后在

render

方法中使用该状态

比如：

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;

类头扩展组件{
陈述={
已连接：空
}
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
setState（{user:user}）；
});    
}
render（）{
返回(
{用户？：}
);
}
};
导出默认标题；

另见：

• 。异步加载数据也存在同样的问题，但随后在云存储中获取图像的下载URL
• 。这突出了异步加载数据的相同问题，但现在是从实时数据库获取JSON数据

---

非常感谢您的回复！我将所有这些应用到我的代码中，它工作正常！我将借此机会更好地了解它的工作原理，并查看您发送给我的链接。再次感谢，祝你有愉快的一天！非常感谢您的回复！我将所有这些应用到我的代码中，它工作正常！我将借此机会更好地了解它的工作原理，并查看您发送给我的链接。再次感谢，祝你有愉快的一天！