Question

我已经像这样设置了一个React Context：

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

，并且我正在使用它在App.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组件中使用该Context：

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>
    );
};

但是，即使存储中有值，上下文中的令牌值也未定义。如果我将prop手动传递给RootNav（无上下文），则可以使用它，就像这样：

App.js

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

RootNav.js


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

    return (
    ...

但是，我想在更嵌套的地方使用此标记，因此，如果可以使它起作用，我宁愿仅使用上下文。有任何想法吗？

Answer 1

通过令牌传递值

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

在消费者中

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

Answer 2

尝试使用对象而不是字符串。

如何使用带有React钩子的React Native AsyncStorage？

2 个答案: