React Native AsyncStorage returns 奇怪的值

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

AppHeader.js

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() 到 return 键参数的值，如果不存在则为 null，但我在控制台中得到的是：{"_U": 0, "_V": 0, "_W": null, "_X": null} .

这不是 documentation of AsyncStorage 指示的方式。

Answer 1

您没有从 _retrieveData 函数返回任何内容。试试这样写：

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

Answer 2

_retrieveData 在这里返回承诺。您需要等待该承诺得到解决。试试这样写：

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

AppHeader.js

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

阅读此内容更清晰：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

Answer 3

这是因为您没有等待 _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 />;
}

我在最初的 useEffect 中调用了 fetchUser，它在 AppHeader 组件首次加载时被调用。它将加载布尔值设置为 true，然后请求用户数据。当返回 userData 时，它将其设置为状态并将加载设置为 false。

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

React Native AsyncStorage returns 奇怪的值

ReactNative AsyncStorage returns weird values

react-native

asyncstorage