Как присваивать значения из FireBase в функциональных компонентах реагировать - PullRequest
0 голосов
/ 06 апреля 2019

Я новичок в реагировании и пожаре.

ПРОБЛЕМА:

Я пытаюсь получить доступ к переменной, которая возвращает 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>

1 Ответ

0 голосов
/ 06 апреля 2019

в вашем коде, console.log(isStudent); выполняется перед выполнением кода

snapshot => {
          if (snapshot.val().role === "student") {
          console.log(snapshot.val());
          isStudent=true
        }

, поэтому вы получите isStudent=false

, поэтому вы можете использовать async-await

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

                  const uid = props.user.uid;

                  const studentRef = await firebase
                          .database()
                          .ref(`student/${uid}`);
                  const studentSnapshot = await studentRef.once('value');

                  if (studentSnapshot.val().role === "student") {
                      isStudent=true;
                  }                      

                  console.log(isStudent); 

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