从异步存储中获取 initialRouteName 时出现问题答案

【问题标题】：Problems fetching initialRouteName from Async Storage从异步存储中获取 initialRouteName 时出现问题
【发布时间】：2021-03-29 19:26:30
【问题描述】：

我是 React 的新手，所以我希望你能忍受我。

我想在用户第一次打开应用时向他们展示入门屏幕。第二次，我想显示登录屏幕。

我的方法是更改 OnboardingStack.Navigator 中的 initialRouteName。在第一次启动时，它应该在第二次启动“登录”时为“入职”。我正在使用 asycnStorage 来存储这些值。

一旦应用打开，“登录”就会添加到 LaunchStatusKey。在第二次打开时，它应该注册 LaunchStatusKey 实际上是“登录”，这应该继续并将 initialRouteName 设置为“登录”。但这不起作用。

我怀疑在等待和启动我的应用之间存在时间差，在它可以获取 LaunchStatusKey 并将 initialRouteName 设置为“登录”之前，它会启动并使用默认的“入职”

关于如何解决这个问题的任何想法？

感谢阅读！

const OnboardingStack = createStackNavigator();

const App = ({ navigation }) => {

  const [initialRouteName, setInitialRouteName] = useState('')

  const save = async () => {
    try {
      await AsyncStorage.setItem("launchStatusKey", initialRouteName)
    } catch (err) {
      alert(err);
    }
  };
  save();

  const load = async () => {
    try {
      let key = await AsyncStorage.getItem("launchStatusKey")
      if (key === null) {
        console.log('It is empty')
        setInitialRouteName('Login')
      } else {
        console.log('It is not empty')

      }
    } catch (err) {
      alert(err);
    }
  }; 

  useEffect(() => {
    load();
  },);

  return (
    <NavigationContainer>
      <OnboardingStack.Navigator initialRouteName={initialRouteName}>
        <OnboardingStack.Screen name="Onboarding" component=         {OnboardingScreen} />
        <OnboardingStack.Screen
          name="Login"
          component={LoginScreen}
          options={{ header: () => null }}
        />
        <OnboardingStack.Screen
          name='SignUp'
          component={SignUpScreen}
        />
        <OnboardingStack.Screen
          name='Home'
          component={AppTabsScreen}
        />
        <OnboardingStack.Screen
          name={'Loading'}
          component={LoadingScreen}
        />
      </OnboardingStack.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

标签： javascript react-native react-navigation asyncstorage

【解决方案1】：

您可以使用您的状态来检查存储中的密钥是否已加载：

const [statusKeyLoaded, setStatusKeyLoaded] = useState(false)

当你的密钥被加载时，将此状态设置为 true：

let key = await AsyncStorage.getItem("launchStatusKey")
setStatusKeyLoaded(true)

然后仅当您知道您的密钥已加载时才呈现视图：

return (
   <>
    {statusKeyLoaded && (
    <NavigationContainer>
       ....
    </NavigationContainer> )}
   </>

【讨论】：

谢谢。现在可以使用了。