React - 组件渲染后值更改

如何解决React - 组件渲染后值更改

我一直在研究与食物相关的 React Native 应用程序，并且为了登录，我想分离为普通用户和餐厅返回的堆栈。

我遇到的问题是 restaurantUserChecker 的返回值与第二个 UseEffect 获得的值不同。 console.log('1',doc.exists) 为真，因此应返回真。但 console.log('2',val) 为 false，导致所有用户获得相同的堆栈。

  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>
  );
}

我很感激所有的帮助，因为我已经在这个问题上挣扎了好几个小时。

解决方法

您的函数 restaurantUserChecker 必须返回一个 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);
    });
}

,

您不需要像其他答案所暗示的那样从 restaurantUserChecker 返回承诺。允许在 then 函数上调用 async。 restaurantUserChecker 的以下更改也应按您的预期执行。

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;
}

,

您的两个答案都有效，现在我明白导致问题的原因了。如果允许我在这里引用蝙蝠侠的话，你们就是我们不配但需要的英雄。 非常感谢各位！