堆栈导航器使用 useEffect 反应导航身份验证流程

Question

我是 react native 的新手，我尝试使用 React Navigation 在登录和主屏幕之间导航来实现简单的登录。但是，当以前的用户凭据存储在 asyncStorage 中时，我无法弄清楚如何让用户回家，而当 asyncStorage 中没有存储凭据时，我会进入登录屏幕。即使我已登录，我也会不断进入登录屏幕。我尝试搜索、复制、修改我在互联网上找到的任何示例，但没有一个满足我的需求，更不用说每个示例都使用 react navigation 版本 4。 xx 及以下。我怎样才能做到这一点，所以我可以为我的 react native 项目中的所有其他代码实现它们。也许我遗漏了什么或写错了什么？任何帮助表示赞赏。启动画面 setTimeOut 似乎也不起作用。

流程应该是：

启动画面 -> isLogin? -> 主页

启动画面 -> 没有登录？ -> 登录屏幕

但我不断得到

启动画面（眨眼间）-> 登录屏幕

无论我是否登录

这是我的 App.js

import 'react-native-gesture-handler';
import React, {Component, useEffect, useReducer} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {loadUser} from './src/util/userStorage';
import LoginFunct from './src/loginFunct';
import Home from './src/home';
import SplashScreen from './src/splashScreen';

const Stack = createStackNavigator();

function App({navigation}) {
  const [state, dispatch] = useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'FETCH_CREDS':
          return {
            ...prevState,
            user: action.user,
            loading: false,
            isLogin: action.isLogin,
          };
      }
    },
    {
      loading: true,
      isLogin: false,
      user: {},
    },
  );

  useEffect(() => {
    const fetchData = () => {
      let userData;
      let loggedIn;
      try {
        // setTimeout(() => {
        loadUser().then((data) => {
          if (data) {
            console.log(data);
            userData = data;
            loggedIn = true;
          }
        });
        // }, 2000);
      } catch (e) {
        console.log(e);
      }
      dispatch({
        type: 'FETCH_CREDS',
        user: userData,
        loading: false,
        isLogin: loggedIn,
      });
    };
    fetchData();
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {!state.loading ? (
          state.isLogin ? (
            <>
            {console.log(state.isLogin)}
            <Stack.Screen
              name="Home"
              component={Home}
              options={{
                title: 'Home',
              }}
            />
            <Stack.Screen
              name="LoginFunct"
              component={LoginFunct}
              options={{
                title: 'Sign In',
              }}
            />
            </>
          ) : (
            <>
            {console.log(state.isLogin)}
            <Stack.Screen
              name="LoginFunct"
              component={LoginFunct}
              options={{
                title: 'Sign In',
              }}
            />
            <Stack.Screen
              name="Home"
              component={Home}
              options={{
                title: 'Home',
              }}
            />
            </>
          )
        ) : (
          <Stack.Screen name="SplashScreen" component={SplashScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

这是我的 userStorage，loadUser 所在的位置

import AsyncStorage from '@react-native-async-storage/async-storage';

const STORAGE_KEY = 'USER';

export const loadUser = async () => {
  try {
    const data = await AsyncStorage.getItem(STORAGE_KEY);
    if (data !== null) {
      return data;
    }
  } catch (error) {
    console.log('Error user loading', error);
  }
};

export const saveUser = async (data) => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(data));
  } catch (error) {
    console.log(error);
  }
};

export const clearUser = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    console.log(error);
  }
};

Answer 1

您的 fetch 和异步存储都是异步的。

尝试使用此方法，将其转换为异步函数并使用 await。这允许在异步函数完成后调用您的调度。

useEffect(() => {

const fetchData = async() => {
      let userData;
      let loggedIn;
      try {
        // setTimeout(() => {
        await loadUser().then((data) => {
          if (data) {
            console.log(data);
            userData = data;
            loggedIn = true;
          }
        });
        // }, 2000);

      dispatch({
        type: 'FETCH_CREDS',
        user: userData,
        loading: false,
        isLogin: loggedIn,
      });
      } catch (e) {
        console.log(e);
      }

    };
      fetchData();
},[])

Using Async and Await for asynchronous operations

或者，将您的 dispatch 语句放在 then 语句中。