更改状态后重新读取屏幕

Question

我对usestate有问题，事实是，在状态更改之后，它不会恢复屏幕：

例如，当用户登录时，我通过我的API获取cookie，但是主页没有自动加载自动，我需要在我的vscode文件中执行ctrl + s以“更新”状态更改，从而更改页面 同样的问题如果用户要断开连接，则用户必须将页面更改为“更新”状态，或者我必须执行ctrl + s

app.js

const AuthStack = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(null);
  //Method to check if the session cookie exists on the device
  checkSessionCookie().then((isLoggedIn) => setIsLoggedIn(isLoggedIn));
  return (
    <Stack.Navigator initialRouteName="HomeScreen">
      {isLoggedIn ? (
        <>
          <Stack.Screen
            name="TabNavigator"
            component={TabNavigator}
            options={{
              headerShown: false,
            }}
          />
        </>
      ) : (
        <>
          <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="RegisterScreen"
            component={RegisterScreen}
            options={{
              headerShown: false,
            }}
          />
        </>
      )}
    </Stack.Navigator>
  );
};

Answer 1

使用效果，因为当组件渲染时，

第一个状态将初始化并执行返回代码，然后使用使用效率
bu这个代码应该像

import {useState, useEffect} from 'react'
.
.
.
const AuthStack = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(null);
    const checkIsLogedIn = () => checkSessionCookie().then((isLoggedIn) => setIsLoggedIn(isLoggedIn));
useEffect(() => {
    checkIsLogedIn();
}, []);
return (
    <Stack.Navigator initialRouteName="HomeScreen">
    {isLoggedIn ? (
        <>
        <Stack.Screen
            name="TabNavigator"
            component={TabNavigator}
            options={{
            headerShown: false,
            }}
        />
        </>
    ) : (
        <>
        <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={{
            headerShown: false,
            }}
        />
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={{
            headerShown: false,
            }}
        />
        <Stack.Screen
            name="RegisterScreen"
            component={RegisterScreen}
            options={{
            headerShown: false,
            }}
        />
        </>
    )}
    </Stack.Navigator>
);
};