React Native - 为异步存储值更改添加监听器
Posted
技术标签:
【中文标题】React Native - 为异步存储值更改添加监听器【英文标题】:React Native - Add a listener to Async Storage value change 【发布时间】:2021-01-15 01:14:52 【问题描述】:您好,我在 LoginPage 上设置了 AsyncStorage.getItem('authStatus') 的值,但问题是 Navigator 类不响应 AsyncStorage 的值更改。如何将监听器添加到 AsyncStorage.getItem('authStatus')?
export default class Navigator extends React.Component
constructor(props)
super(props);
this.state = authStatus: ''
async componentDidMount()
var authStatus = await AsyncStorage.getItem('authStatus');
**DOESN'T WORK ->** authStatus.addListener(authStatus =>
this.setState(this.state.authStatus = authStatus)
);
console.log("authStatus =")
console.log(this.state.authStatus)
SplashScreen.hide()
render()
return (
(this.state.authStatus == 'authenticated')
?
this.Home()
:
this.AuthStackScreen()
);
【问题讨论】:
登录屏幕是身份验证堆栈的一部分吗?堆栈导航器? 【参考方案1】:我不知道您是否以正确的方式使用 AsyncStorage...试试这样的方法:
您可以使用 AsyncStorage 像这样存储和检索您的数据:
const storeData = async (key, value) =>
try
await AsyncStorage.setItem(key, value);
catch (error)
console.log(error);
;
const getData = async key =>
try
const data = await AsyncStorage.getItem(key);
if (data !== null)
console.log(data);
return data;
catch (error)
console.log(error);
;
然后使用键名调用 getData,就像您将值存储在任何您想要的位置一样,并将键设置为状态值。
存储值:
storeData("authStatus", the value);
获取值:
await getData("authStatus")
.then((data) => data)
.then((value) => this.setState( authStatus: value ))
.catch((err) => console.log("AsyncStorageErr: " + err));
【讨论】:
【参考方案2】:异步存储是适用于您的 React Native 应用程序的异步、未加密、持久、键值存储解决方案。它不提供任何事件。它返回一个承诺。
参考: https://react-native-community.github.io/async-storage/docs/usage
在您的代码中,“authStatus”可能包含也可能不包含值。
try
const authStatus = await AsyncStorage.getItem('')
if(value !== null)
// value previously stored
this.setState(authStatus)
【讨论】:
以上是关于React Native - 为异步存储值更改添加监听器的主要内容,如果未能解决你的问题,请参考以下文章
React Native:如何从循环中获取值到钩子 useState
如何在 React Native 中使用异步存储存储唯一数据?
React Native 已经有了异步存储。为啥我应该在我的 react native 应用中使用 Redux 和 Redux Thunk?