反应上下文 api 与 useReducer 状态不改变

Question

我有一个 Auth 屏幕和一个 HomeScreen，为了管理我正在使用的 Context API 的状态，我有 2 个状态 -> 1) user 我决定是否通过身份验证的状态（同时从服务器获取信息），2）loading 状态以在所有这些发生时显示加载屏幕。问题是，一切正常，甚至将 user 的状态从 null 设置为来自我的 API 的明确定义的对象，并且以同样的方式我正在更改我的 loading 状态但它没有改变，它是false 每次尽管我使用相同的方法进行调度。

上下文文件：

import React, { createContext, useContext, useReducer } from 'react';
import {UserReducer} from './reducers';

const initialState = {
  user: null,
  loading: false,
};

const UserContext = createContext(initialState);

export const UserProvider = ({children}) => {
  const [globalState, dispatch] = useReducer(UserReducer, initialState);

  return (
    <UserContext.Provider value={{
      user: globalState.user,
      loading: globalState.loading,
      dispatch,
    }} >
      {children}
    </UserContext.Provider>
  );
};

export default function() {
  return useContext(UserContext);
}

动作：

export const SET_USER_DETAILS = (userDetails) => {
  return {
      type: 'SET_USER_DETAILS',
      payload: userDetails,
  };
};

export const SET_LOADING = (loadingState) => {
  return {
    type: 'SET_LOADING',
    payload: loadingState,
  };
};

减速机：

export const UserReducer = (state, action) => {
  switch (action.type) {
    case 'SET_USER_DETAILS':
      return {
        ...state,
        user: action.payload,
      };
    case 'SET_LOADING':
      return {
        ...state,
        loading: action.payload,
      };
    default:
      return state;
  }
};

主导航文件：

const Navigation = () => {
  const {user, dispatch, loading} = useAuth();
  console.log(user); // after successful fetch from api, I'm getting the desired user data.
  console.log(loading); //  PROBLEM => always false.

  useEffect(() => {
    checkUserLoggedInStatus(dispatch);
  }, [dispatch]);

  return loading ? (
    <LoadingScreen />
  ) : !user ? (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="Verify" component={OTPVerificationScreen} />
    </Stack.Navigator>
  ) : (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Message" component={MessageScreen} />
    </Stack.Navigator>
  );
};

checkUserLoggedInStatus 函数：

export const checkUserLoggedInStatus = (dispatch) => {
  dispatch(SET_LOADING(true)); // NOT WORKING/NOT CHANGING THE LOADING STATE
  AsyncStorage.getItem('token')
  .then((token) => {
    if (token) {
      fetch(`${API_URL}/user/`, {
        method: 'GET',
        headers: {
          ...
        },
      })
      .then(response => response.json())
      .then((data) => {
        if (data.type === 'success') {
          const details = data.data.user;
          dispatch(SET_USER_DETAILS(details)); // THIS IS WORKING FINE.
        }
      })
      .catch((error) => {
        console.log(error.message);
      });
    }
  })
  .catch((error) => {
    console.log(error.message);
  });
  dispatch(SET_LOADING(false)); // NOT WORKING/NOT CHANGING THE LOADING STATE
};

我无法理解我做错了什么，因为我正在使用 SET_USER_DETAILS 动作/减速器功能做同样的事情，但我不知道 loading 状态有什么问题。

摘要：无法根据来自UserContext 的loading 状态呈现LoadingScreen。

如果有人可以帮助我，我将不胜感激！

谢谢！

Answer 1

您的实现问题在于，在checkUserLoggedInStatus 中，您在then 和catch 块之外将加载状态设置为false。由于您正在执行异步任务，并且需要在此异步任务完成后将 loading 设置为 false，因此您需要在 then 或 catch 中将 loading 设置为 false。