如何使用带有React钩子的？

Question

我设置了一个类似于这样的反应上下文：

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组件中使用这个上下文：

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 (没有上下文)，我可以很好地使用它，如下所示：

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

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