使用useReducer狀態不改變反應背景關系api

我有一個 Auth 螢屏和一個 HomeScreen，為了管理我使用 Context API 的狀態，我在其中有 2 個狀態 -> 1)user我決定是否通過身份驗證的狀態（同時從服務器獲取資訊） , 2)loading狀態以在所有這些發生時顯示加載螢屏。問題是，一切正常，甚至將usernull的狀態設定為來自我的 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
};

I cannot understand what I am doing wrong because I am doing the same thing with SET_USER_DETAILS action/reducer function but I don't know what's wrong with the loading state.

SUMMARY: Not able to render LoadingScreen based on loading state from UserContext.

If anyone could help me, I would really appreciate it!

Thank you!

uj5u.com熱心網友回復：

您實作的問題在于，checkUserLoggedInStatus您在then和catch塊之外設定加載狀態為 false 。由于您正在執行異步任務，并且需要在此異步任務完成后將加載設定為false，因此您需要在then或中將加載設定為false catch。

標籤：reactjs react-native react-hooks context-api

上一篇：如何在宣告動態樣式時修復ReactNative中的“NotAFunction”錯誤

下一篇：使用useState()更改后ReactNativefetchapi值不會更新