(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()
}, []);
我正在尝试在 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()
}, []);