（React Native）设置 AsyncStorage 值但在我检索它时得到垃圾

Posted 2023-03-31

【中文标题】（React Native）设置 AsyncStorage 值但在我检索它时得到垃圾

【英文标题】：(React Native) Setting AsyncStorage value but getting garbage when I retrieve it

【发布时间】：2020-09-26 07:30:08

【问题描述】：

我正在尝试在 AsyncStorage (React Native) 中保留用户的登录信息，以便他们在再次启动应用程序时不必登录。我有应该这样做的代码，但是当我稍后尝试检索该值时，它显示"_U": 0, "_V": 0, "_W": null, "_X": null，看起来像垃圾值。我在这里可能做错了什么？

我的代码（为清楚起见省略了样式）：

App.js

import React,  useEffect  from "react";
import AsyncStorage from "@react-native-community/async-storage";
import  Text, Button  from "react-native";
import Login from "./components/Login";
import Constants from "./libs/constants";

const App = () => 
  const onLogin = async (e) => 
    if (e.success)
      await AsyncStorage.setItem(Constants.LOCAL_KEY, JSON.stringify(e));
  ;

  const logoutDone = async () => 
    await AsyncStorage.removeItem(Constants.LOCAL_KEY);
  ;

  useEffect(() => 
    console.log( userData: AsyncStorage.getItem(Constants.LOCAL_KEY) );
    // this shows "_U": 0, "_V": 0, "_W": null, "_X": null
  , []);

  const isLoggedIn = () => 
    let userJSON = AsyncStorage.getItem(Constants.LOCAL_KEY);

    return (
      userJSON != undefined && JSON.parse(userJSON).EmployeeId != undefined
    );
  ;

  return !isLoggedIn() ? (
    <Login onLogin=onLogin />
  ) : (
    <>
      <Text>JSON.stringify(AsyncStorage.getItem(Constants.LOCAL_KEY))</Text>
      <Button
        title="Logout"
        onPress=() => 
          logoutDone();
        
      ></Button>
    </>
  );
;

export default App;

登录.js

import Constants from '../libs/constants';
import React, useState from 'react';

import 
  ScrollView,
  View,
  Text,
  StatusBar,
  TextInput,
  TouchableOpacity,
 from 'react-native';

const Login = (onLogin) => 
  const [Username, setUsername] = useState('');
  const [Password, setPassword] = useState('');

  const doLogin = () => 
    fetch(Constants.LOGIN_API_URL, 
      method: 'post',
      body: JSON.stringify(Username, Password),
    )
      .then((r) => r.json())
      .then((s) => 
        onLogin(s);
      );
  ;

  return (
    <ScrollView>
      <StatusBar hidden=true />
      <View style=padding: 0, margin: 0>          
        <View style=padding: 30>
          <TextInput
            onChangeText=(text) => setUsername(text)></TextInput>
          <TextInput
            onChangeText=(text) => setPassword(text)></TextInput>
          <TouchableOpacity style=styles.button onPress=() => doLogin()>
            <View style=flexDirection: 'row', flexWrap: 'wrap'>
              <Text style=styles.buttonText>Sign In</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
;

export default Login;

【问题讨论】：

AsyncStorage 正如它所提到的，它是异步的。无论您在promise 的console.log 中看到什么。正确的方法是使用启动屏幕异步检查以识别用户是否已经登录

【参考方案1】：

那是因为 AyncStorage.getItem 返回了一个承诺，所以你必须等待或添加一个回调。请更新以下代码

useEffect(() => 
    console.log( userData: AsyncStorage.getItem(Constants.LOCAL_KEY) );
    // this shows "_U": 0, "_V": 0, "_W": null, "_X": null
  , []);

到这里

useEffect(() => 
  const storage = async()=>
    let items = await AsyncStorage.getItem(Constants.LOCAL_KEY);
    console.log(items)
  
  storage()
, []);

注意：由于 useEffect 不接受异步函数，我们必须在 useEffect 中声明一个异步方法并立即执行。

【参考方案2】：

使用

 await Asyncstorage.getItem(Constants.LOCAL_KEY)

在 Hooks 中你可以这样写

useEffect(() => 
  const retrieveData = async() => 
    let items = await AsyncStorage.getItem(Constants.LOCAL_KEY);
    console.log(items)
  
  retrieveData()
, []);