React原生状态改变后不重新渲染

Question

在GlobalState文件中，有一个函数loginFb，它将根据我的休息API的响应来更新状态，当我试图控制台状态时，我可以看到我的状态在登录后发生了变化，但我的应用程序没有重新渲染。我希望我的应用程序在状态变化时重新渲染并移动到HomeStackScreens。

以下是我的app.js

import 'react-native-gesture-handler';
import React, {useContext} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@reactnavigation/material-bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import AsyncStorage from '@react-native-community/async-storage';
import HomeTabs from './screens/HomeTabs';
import Login from './screens/Login';
import {GlobalContext, GlobalProvider} from './context/GlobalState';

const AuthStack = createStackNavigator();
const HomeStack = createStackNavigator();

const AuthStackScreen = () => {
  return (
    <AuthStack.Navigator screenOptions={{}}>
      <AuthStack.Screen name="Login" component={Login} />
    </AuthStack.Navigator>
  );
};

const HomeStackScreens = () => {
  return (
    <HomeStack.Navigator
      screenOptions={{
        headerTintColor: 'white',
        headerStyle: {backgroundColor: '#37966f', elevation: 0},
      }}>
      <HomeStack.Screen name="Home" component={HomeTabs} />
    </HomeStack.Navigator>
  );
};

function App() {


  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;
      console.log('is Signedin :', isSignedIn);

      try {
        userToken = await AsyncStorage.getItem('authTocken');
        if (userToken) console.log('autTocken:' + userToken);
        else console.log('no tocken');
      } catch (e) {

        console.log('no tocken');
      }


    };

    bootstrapAsync();
  }, []);
  const {authState, isSignedIn} = useContext(GlobalContext);
  return (
    <GlobalProvider>
      <NavigationContainer>
        {console.log('from app:', authState, 'signedin', isSignedIn)}
        {isSignedIn ? <HomeStackScreens /> : <AuthStackScreen />}
      </NavigationContainer>
    </GlobalProvider>
  );
}

export default App;

全局状态.js

import React, {createContext, useReducer} from 'react';
import AppReducer from './AppReducers';
import AsyncStorage from '@react-native-community/async-storage';

//Initial State

const initialState = {
  authTocken: '',
  refreshTocken: '',
  fbToken: '',
  isSignedIn: false,
};

export const GlobalContext = createContext(initialState);
export const GlobalProvider = ({children}) => {
  const [authState, dispatch] = useReducer(AppReducer, initialState);

  async function loginFb(fbToken) {
    // loginFb: async fbToken=>{
    await fetch(
      'https://api_url?accessToken=' +
        fbToken,
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      },
    )
      .then((resp) => resp.json())
      .then(async function (data) {
        await AsyncStorage.setItem('authTocken', data.token);
        await AsyncStorage.setItem('refreshTocken', data.refreshToken);
        await AsyncStorage.setItem('fbToken', fbToken);
        dispatch({
          type: 'SIGN_IN',
          payload: data,
        });
      })
      .catch((error) => {
        console.log('found error', error);
      });
  }
  return (
    <GlobalContext.Provider
      value={{authState, loginFb, isSignedIn: authState.isSignedIn}}>
      {children}
    </GlobalContext.Provider>
  );
};

AppReducer.js

export default (state, action) => {
  switch (action.type) {
    case 'SIGN_IN': {
      return {
        ...state,
        isSignedIn: true,
        refreshTocken: action.payload.refreshToken,
        authTocken: action.payload.token,
      };
    }

    default:
      return state;
  }
};

Answer 1

而不是有

export default App;

改为

export default () => (
  <GlobalProvider>
     <App />
   </GlobalProvider>
    )

现在它的工作