Как проверить логин и вынести условно (ReactJS и Firebase)?

Question

Я хочу убедиться, что пользователь вошел в систему, прежде чем запускать рендеринг A или B.

Когда я его улавливаю, я получаю true в ответ, когда проверяю, вошел ли я в систему. , однако неверный оператор if будет обработан.

Я думаю, это потому, что firebase требует времени для загрузки, и моя функция рендерится до того, как это сделает firebase.

const renderForm = () => {

  let isLoggedin = false;
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      isLoggedin = true;
      console.log(isLoggedin + " Logged in")
    } else {
      isLoggedin = false;
    }
  });
  return (
    <div>
      {isLoggedin ? (<AddNewCountryForm />) : (<p>You have to log in</p>)}

    </div>
  )
}

Может кто-нибудь объяснить, как я должен go опередить и решить это? Очевидно, что я хочу сделать компонент, если пользователь вошел в систему.

Спасибо,

Answer 1

Вам необходимо преобразовать isLoggedIn в состояние React, а не в локальную переменную.

Согласно приведенному ниже коду, когда isLoggedIn равно false, вы должны увидеть <p>You have to log in</p> else AddNewCountryForm компонент должен render.

   const renderForm = () => {

      const [isLoggedin, setIsLoggedIn] = React.useState(false);
      firebase.auth().onAuthStateChanged(function(user) {
        setIsLoggedIn(!!user);
      });
      return (
        <div>
          {isLoggedin ? (<AddNewCountryForm />) : (<p>You have to log in</p>)}

        </div>
      )
    }

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