React - 组件渲染后更改的值

Question

I have been working on a food related React Native App and for the login I wanted to seperate the Stacks which are returned for normal Users and Restaurants.

The Problem I am experiencing is that the returned value of restaurantUserChecker is different to what the 2nd UseEffect gets. console.log('1', doc.exists) is true and therefore should return true. But console.log('2', val) is false which results in all users getting the same stack.

  async function restaurantUserChecker(){
  const check = firestore().collection('restaurantUsers').doc(auth().currentUser.uid); 

    await (check.get()).then((doc) => {
    if (doc.exists) {
      console.log('1', doc.exists);
      return true;
    }
  }).catch((error) => console.log(error));

  return false;
}

  function MyStack() {

  const [restaurantUser, setRestaurantUser] = useState(false);

  useEffect(() => {
    console.log(auth().currentUser.uid);
    restaurantUserChecker().then((val) => {
      console.log('2', val);
      setRestaurantUser(val);
    }).catch((error) => console.log(error));
  }, []);

  if(restaurantUser){
    return <RestaurantHomeStack/>
  }

  return <DrawerNavigator />;
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <MyStack/>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

I would appreciate all kind of help, as I have struggled for many hours on this problem.

Answer 1

Your function restaurantUserChecker must return a Promise.

async function restaurantUserChecker() {
    return new Promise(async (resolve, reject) => {
        const check = firestore()
        .collection("restaurantUsers")
        .doc(auth().currentUser.uid);

    await check
        .get()
        .then((doc) => {
            if (doc.exists) {
                console.log("1", doc.exists);
                resolve(true);
            }
        })
        .catch((error) =>{ console.log(error); reject(error)});

    resolve(false);
    });
}

Answer 2

You aren't required to return a promise from restaurantUserChecker as the other answer suggests. It is allowed to call then on an async function. The following changes to restaurantUserChecker should also perform as you intended.

async function restaurantUserChecker(){
  const check = firestore()
        .collection("restaurantUsers")
        .doc(auth().currentUser.uid);

  try {
     var doc = await check.get();
     if (doc.exists) {
        console.log('1', doc.exists);
        return true;
     }
  } catch(error) {
       console.log(error);
  }
  return false;
}

Answer 3

Both of your answers worked and now I understand what caused the issue. You're the heroes we don't deserve but need, if I'm allowed to quote Batman here. Thanks a lot guys!