Как получить доступ к FireBase результат за пределами метода React

Question

Я новичок и реагирую.

ПРОБЛЕМА:

Я пытаюсь получить доступ к переменной, которая возвращает true, когда она успешно получает результат, она работает внутри метода .then, но за пределами метода не может получить результат (переменная isStudent). я любые предложения, советы будут полезны.

     const Routes = props => {
                  if (props.user) {
                     let isStudent=false;

                    const uid = props.user.uid;

                    firebase
                      .database()
                      .ref(`student/${uid}`)
                      .once("value")
                      .then(snapshot => {
                        if (snapshot.val().role === "student") {
                          console.log(snapshot.val());
                            isStudent=true
                        }
                      });

                    console.log(isStudent); //false
//i am getting the default value, if i remove that i get undefined

                  return (
                    <MainLayout>
                      <Switch>

                <StudentPublicRoute
                          {...props}
                          exact
                          restricted={true}
                          path="/student/login"
                          component={StudentLogin}
                        />
                        {isStudent&& <StudentPrivateRoute
                          {...props}
                          path="/student/studentdashboard"
                          exact
                          component={StudentDash}
                        />}
                 </Switch>
                    </MainLayout>

Answer 1

Метод once возвращает Promise , что означает, что ваша функция будет работать асинхронно, поэтому функция console.log запускается до того, как вы получите ответ от firebase.

В вашем случаевам нужно будет сохранить значение isStudent в React State .

Результат будет примерно таким:

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isStudent: false};
  }
  ...

  firebase
  .database()
  .ref(`student/${uid}`)
  .once("value")
  .then(snapshot => {
  if (snapshot.val().role === "student") {
      this.setState({
        isStudent: true
    });
  }

}

Answer 2

Это потому, что console.log (isStudent) выполняется раньше, чем isStudent = true.

Это всегда будет так, поскольку вызов firebase занимает некоторое время.Также рассмотрите возможность использования компонента класса, а не компонента функции, и используйте некоторую инфраструктуру, такую ​​как redux / saga или redux / thump для таких асинхронных вызовов.

Возможно, вы можете попробовать использовать await / async, это может сработать.

Ваш код никогда не будет работать.