时间戳

首页 > 解决方案 > React - 组件渲染后更改的值

javascript - React - 组件渲染后更改的值

问题描述

我一直在开发一个与食物相关的 React Native 应用程序，对于登录，我想分离为普通用户和餐厅返回的堆栈。

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

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

我将不胜感激各种帮助，因为我在这个问题上已经挣扎了好几个小时。

标签： javascriptreactjsreact-nativereact-hooksuse-effect

解决方案

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

推荐阅读