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

【问题标题】：(React Native) Setting AsyncStorage value but getting garbage when I retrieve it（React Native）设置 AsyncStorage 值但在我检索它时得到垃圾
【发布时间】：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;

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 中看到什么。正确的方法是使用启动屏幕异步检查以识别用户是否已经登录

标签： javascript reactjs react-native mobile

【解决方案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()
}, []);

【讨论】：