Как я могу использовать React Native AsyncStorage с перехватчиками React?

Question

Я установил React Context следующим образом:

export const TokenContext = createContext({token: ''});

, и я использую его для создания провайдера в моем приложении. js, где я пытаюсь сначала получить токен из AsyncStorage :

const App = () => {

    const [token, setToken] = React.useState('');

    const retrieveData = async () => {
        const storedToken = await AsyncStorage.getItem('token');
        console.log(storedToken);
        setToken(storedToken);

        return;
    };

    React.useEffect(() => {
        retrieveData();
    }, []);

    return (
        <NavigationContainer>
            <TokenContext.Provider token={token}>
                <RootNav  />
            </TokenContext.Provider>
        </NavigationContainer>
    );
};

Я хочу использовать этот контекст в RootNav используемом выше компоненте:

const RootNav = () => {
    const token = React.useContext(TokenContext);
    const isSignedIn = !!token;

    return (
        <Root.Navigator>
            {isSignedIn ? (
                <>
                    <Root.Screen name={RouteNames.TAB_NAV} component={TabNav} />
                </>
            ) : (
                <>
                    <Root.Screen
                        name={RouteNames.LOGIN_SCREEN}
                        component={LoginScreen}
                    />
                </>
            )}
        </Root.Navigator>
    );
};

Однако значение токена в контексте не определено, хотя существует стоимость в хранилище. Если я вручную передам реквизит RootNav (без контекста), я смогу использовать его очень хорошо, например:

Приложение. js

...
  return (
        <NavigationContainer>
             <RootNav token={token} />
        </NavigationContainer>
    );

RootNav. js

const RootNav = ({token}) => {
    const isSignedIn = !!token;

    return (
    ...

Тем не менее, я хочу использовать этот токен в местах, которые являются более вложенными, поэтому я предпочел бы просто использовать контекст, если смогу заставить его работать. Любые идеи?

Answer 1

Попробуйте использовать объект вместо строки.

Answer 2

Проходной токен со значением

    <NavigationContainer>
        <TokenContext.Provider value={{token}}>
            <RootNav  />
        </TokenContext.Provider>
    </NavigationContainer>

в потребителе

const {token} = React.useContext(TokenContext);