如何将 React Native AsyncStorage 与 React hooks 一起使用？

Question

我已经像这样设置了 React 上下文：

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

但是，即使存储中有值，上下文中的令牌值仍未定义。如果我手动将 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 Native AsyncStorage 与 React hooks 一起使用？

How can I use React Native AsyncStorage with React hooks?

reactjs

react-native

asyncstorage

react-context

react-hooks