ReactNative AsyncStorage返回奇怪的值

编程问答 2022-08-11

问题描述

我有以下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()返回key参数的值，如果不存在则返回null，但是我在控制台中得到的是：{"_U": 0,"_V": 0,"_W": null,"_X": null}。

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

解决方法

这是因为您没有等待_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的时候调用了useEffect，而最初加载AppHeader组件时会调用它。它将加载布尔值设置为true，然后请求用户数据。返回userData时，它将其设置为状态并将loading设置为false。

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

,

您不会从_retrieveData函数返回任何内容。尝试这样写：

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

_retrieveData在此处返回promise。您需要等待该诺言解决。尝试这样写：

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

asyncstorageasyncstoragereact-nativereact-native