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

(React Native) Setting AsyncStorage value but getting garbage when I retrieve it

我正在尝试在 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;

Login.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;

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

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中声明一个异步方法并立即执行。

使用

 await Asyncstorage.getItem(Constants.LOCAL_KEY)

在 Hooks 中你可以这样写

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