2

サーバーに 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 が null で、サーバーが curl を介して応答を返すことは確かです。私は反応ネイティブに慣れていないので、おそらく私の考えはずれています。誰かがこれを行う正しい方法を説明したり、別の方法を提案したりできますか?

私が知っていること 非同期ストレージは、アプリがデータを配置できるキー バリュー ストアです。このデータは非同期ストレージからオブジェクトの状態に入れることができ、それに応じてビューが更新されます

4

1 に答える 1