呈现后响应本地AsyncStorage获取数据
呈现后响应本地AsyncStorage获取数据
提问于 2015-11-05 19:27:00
我在ComponentWillMount中使用ComponentWillMount来获取本地存储的accessToken，但是在运行render()函数之后，它将返回承诺。我怎样才能让render()等到承诺完成？谢谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-11-11 05:00:22
据我所知，您不能让组件等待呈现。在我正在开发的应用程序中，我所做的就是添加一个加载屏幕，直到AsyncStorage的承诺得到解决为止。见下面的例子：
//
// With class component syntax
//
import React from 'react';
import {
AsyncStorage,
View,
Text
} from 'react-native';
class Screen extends React.Component {
state = {
isLoading: true
};
componentDidMount() {
AsyncStorage.getItem('accessToken').then((token) => {
this.setState({
isLoading: false
});
});
},
render() {
if (this.state.isLoading) {
return <View><Text>Loading...</Text></View>;
}
// this is the content you want to show after the promise has resolved
return <View/>;
}
}//
// With function component syntax and hooks (preferred)
//
import React, { useEffect } from 'react';
import {
AsyncStorage,
View,
Text
} from 'react-native';
const Screen () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
AsyncStorage.getItem('accessToken').then((token) => {
setIsLoading(false);
});
}, [])
if (isLoading) {
return <View><Text>Loading...</Text></View>;
}
// this is the content you want to show after the promise has resolved
return <View/>;
}将isLoading属性设置为状态将导致重呈现，然后可以显示依赖于accessToken的内容。
另外，我还编写了一个名为反应-本机-简单-存储的小库，它简化了AsyncStorage中的数据管理。希望你觉得有用。
Stack Overflow用户
发布于 2017-03-16 23:49:49
基于react本机文档，您可以这样做：
import React, { Component } from 'react';
import {
View,
} from 'react-native';
let STORAGE_KEY = '@AsyncStorageExample:key';
export default class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
loaded: 'false',
};
}
_setValue = async () => {
try {
await AsyncStorage.setItem(STORAGE_KEY, 'true');
} catch (error) { // log the error
}
};
_loadInitialState = async () => {
try {
let value = await AsyncStorage.getItem(STORAGE_KEY);
if (value === 'true'){
this.setState({loaded: 'true'});
} else {
this.setState({loaded: 'false'});
this._setValue();
}
} catch (error) {
this.setState({loaded: 'false'});
this._setValue();
}
};
componentWillMount() {
this._loadInitialState().done();
}
render() {
if (this.state.loaded === 'false') {
return (
<View><Text>Loading...</Text></View>
);
}
return (
<View><Text>Main Page</Text></View>
);
}
}Stack Overflow用户
发布于 2020-04-01 04:50:49
您可以使用比异步存储更容易使用的反应-本机-简单-应用。这个库非常好，它使用异步存储来异步保存数据，并使用内存来同时加载和保存数据，所以我们将数据异步保存到内存中，并在app同步中使用，所以这是很棒的。
import { XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';
const initCallback = () => {
// From now on, you can write or read the variables in RNStorage synchronously
// equal to [console.log(await AsyncStorage.getItem('isShow'))]
console.log(RNStorage.isShow);
// equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3==';
// equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
RNStorage.userInfo = {name: 'rufeng', age: 30};
};
XStorage.initStorage(RNStorage, AsyncStorage, initCallback); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33553112
复制相关文章
相似问题
腾讯云开发者
