Опция заголовка переключателя Firebase с onAuthStateChanged

Question

Извините, если мой вопрос уже задан. Я новичок в реагировании, и я действительно хочу научиться делать это и понимать. Я использую Firebase в своем проекте React. JS и хочу переключить часть заголовка, когда пользователь подключился или нет.

Я думаю, что использование условного рендеринга, но на функции 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;

Спасибо и извините за мой плохой английский sh: /

Answer 1

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;

Также см .:

• Хранение Firebase: загрузите изображения и вставьте их в img sr c в React map . Та же проблема с асинхронно загруженными данными, но затем с получением URL загрузки изображений в облачном хранилище.
• Как обновить данные Firebase для приложения React в реальном времени . Это подчеркивает ту же проблему асинхронно загружаемых данных, но теперь с получением JSON данных из базы данных реального времени.