无法在 React Native 应用程序启动时读取 AsyncStorage 值

Question

我正在使用 React Native 和 Redux。以下代码用于创建 Redux 存储，并使用 AsyncStorage 通过检查是否存在 authToken 来检查用户是否已登录。

import {createStore} from 'redux';
import {persistStore} from 'redux-persist';
async function getAuthToken() {
  return await AsyncStorage.getItem('authToken');
}
export function createStore(onCompletion:() => void):any {
  ...
  const store = createStore(
    reducer,
    {
      auth: {
        authenticated: !!getAuthToken()
      }
    },
    enhancer);
  persistStore(store, {
    storage: AsyncStorage,
  },
  onCompletion);
}

商店的创建：

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      store: createStore(...),
    };
  }
  render() {
    return (
      <Provider store={this.state.store}>
        <AppNavigator />
      </Provider>
    );
  }
}

authToken值在用户登录后正确设置，并在用户注销后删除。但是，在应用程序重新启动后，身份验证令牌不会持久化。对 getAuthToken 的第一次调用总是从 AsyncStorage 返回此垃圾值：

{ _45： 0， _81： 0， _65： 空， _54： 空 }

为什么会这样？

Answer 1

现在你要从 AsyncStorage 返回一个承诺，你需要返回令牌值。尝试：

async function getAuthToken() {
  return await AsyncStorage.getItem('authToken').then((token) => token);
}

Answer 2

使用钩

子效果

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';
export function App() {
  const [token, setToken] = useState<string>();
  useEffect(()=>{
    (async function() {
      setToken(await AsyncStorage.getItem());
      await SplashScreen.hideAsync();
    })();
  },[]);
  if (token) {
    return (<View><Text>{token}</Text></View>);
  } else {
    return null;
  }
}