首页 文章

在React-Native中使用AsyncStorage更新状态的正确方法是什么？

提问于
浏览 次
1

我正在尝试向服务器发出GET请求以检索JSON格式的产品列表 . 然后，我想将数据放入AsyncStorage，以便在视图中显示产品 . 这样做的正确方法是什么？

What I've researched:

在https://facebook.github.io/react-native/docs/asyncstorage.html上，在这个例子中，他们解释了如何从AsyncStorage中检索一个值，而不是设置它并同时检索它

What I have:

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为null，我确定服务器通过curl返回响应 . 我是新来的反应原生，所以也许我的想法是关闭的 . 有人可以解释这样做的正确方法或建议替代方法吗？

What I know 异步存储是应用程序可以放置其数据的键值存储 . 此数据可以从异步存储放入对象的状态，视图将相应更新

react-native asyncstorage

1 回答

  • 4

    一旦从获取请求中获取数据，您就可以将其设置为状态，而不是设置和从异步存储获取：

    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
}
    回复于

相关问题