ReactNative AsyncStorage 返回奇怪的值

Question

我有以下 React Native 模块：

_localStorage.js

import AsyncStorage from '@react-native-community/async-storage';

const _storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    console.log(error);
  }
}

const _retrieveData = async (key) => {
  try {
    await AsyncStorage.getItem(key);
  } catch (error) {
    console.log(error);
  }
}

export {_storeData, _retrieveData};

应用头文件

import React from 'react';
import {Button} from 'react-native-paper';
import {_retrieveData, _storeData} from '../../utils/_localStorage'

const LoginButton = () => {
  return (
    <Button icon='login' color='yellow' onPress={() => navigation.navigate('Login')}>
      Login
    </Button>
  )
}

const UserButton = (user) => {
  return (
    <Button color='yellow' onPress={() => console.log('Botón usuario presionado...')}>
      text
    </Button>
  )
}

const AppHeader = ({navigation, route}) => {
  const user = _retrieveData('user');
  console.log(user);
  return user === ''? <LoginButton />: <UserButton user={user} />;
}

export default AppHeader;

我预计_retrieveData()，如果不退出，返回的关键参数的值，或空，但我所得到的控制台是这样的：{"_U": 0, "_V": 0, "_W": null, "_X": null}。

这不是AsyncStorage 的文档表明它工作的方式。

Answer 1

那是因为你没有等待_retrieveData完成。您只是设置user异步函数而不是等待其返回值。

尝试这样的事情：

const AppHeader = ({navigation, route}) => {
  const [user, setUser] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    fetchUser();
  }, [])

  const fetchUser = async () => {
    setIsLoading(true);
    const userData = await _retrieveData('user');
    setUser(userData);
    setIsLoading(false);
  }

  if (isLoading) return <LoadingIndicator />
  if (!!user) return <UserButton user={user} />
  return <LoginButton />;
}

我调用了fetchUser在useEffectAppHeader 组件首次加载时调用的初始值。它将加载布尔值设置为 true，然后请求用户数据。当返回 userData 时，它会将其设置为 state 并将加载设置为 false。

您不需要加载位，但我包含了它，否则您的应用程序会在获取数据时显示登录按钮。您必须LoadingIndicator自己创建组件。