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

Question

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

我研究的内容：

在 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返回响应。我是新手，所以也许我的想法是错误的。有人可以解释正确的方法或建议替代方法吗？

我所知道的异步存储是应用可以在其中放置其数据的键值存储。可以将此数据从异步存储放入对象的状态，视图将相应地更新

Answer 1

无需

设置和从异步存储获取，只需将其设置为从获取请求获取数据后的状态：

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
}