我正在尝试向服务器发出 GET 请求以检索 JSON 形式的产品列表。然后我想将数据放入 AsyncStorage 中,以便我可以在视图中显示产品。这样做的正确方法是什么?
我研究过的内容:
on https://facebook.github.io/react-native/docs/asyncstorage.html,在示例中,他们解释了如何从 AsyncStorage 检索值,而不是同时设置它和检索它
我拥有的:
componentDidMount () {
this.fetchProducts()
this._loadInitialState().done();
}
_loadInitialState = async () => {
try {
var value = await AsyncStorage.getItem('products')
if (value != null) {
this.setState({products: value});
}
} catch (error) {
console.log("error setting product list");
}
}
fetchProducts() {
fetch("http://localhost:3000/products",{
method: "GET",
headers: {
'Content-Type': 'application/json'
},
})
.then((response) => (response.json()))
.then((data) => setProductList(data));
}
setProductList(json_data) {
Async.setItem('products': json_data);
}
render() {
console.log(this.state.products)
//render view
}
-> this.state.products 为空,我确信服务器通过curl 返回响应。我是反应原生的新手,所以也许我的想法不对。有人可以解释执行此操作的正确方法或建议替代方法吗?
我知道的异步存储是应用程序可以放置其数据的键值存储。该数据可以从异步存储放入对象的状态中,视图将相应更新
您可以在从获取请求获取数据后将其设置为状态,而不是设置和从异步存储获取:
componentDidMount () {
this.fetchProducts()
}
fetchProducts() {
fetch("http://localhost:3000/products",{
method: "GET",
headers: {
'Content-Type': 'application/json'
},
})
.then((response) => (response.json()))
.then((data) => setProductList(data));
}
setProductList(json_data) {
this.setState({ products: json_data }, () => { //Here
Async.setItem('products': json_data);
}
}
render() {
console.log(this.state.products)
//render view
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)