如何从功能组件中的firebase赋值来做出反应

Question

我是新来的反应和firebase。

问题：

我试图访问一个变量，当它成功获得结果时返回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

在你的代码中，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>