React-Native에서 AsyncStorage를 사용하여 상태를 업데이트하는 올바른 방법은 무엇입니까?

Question

JSON 형식의 제품 목록을 검색하기 위해 서버에 GET 요청을 보내려고합니다. 그런 다음 뷰에 제품을 표시 할 수 있도록 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로, 나는 확실히 서버가 컬를 통해 응답을 반환 알고있다. 나는 새로운 네이티브 반응을하므로 아마도 내 생각은 꺼져 있습니다. 누군가가이 작업을 수행하거나 대체 방법을 제안하는 올바른 방법을 설명 할 수 있습니까?

내가 알고있는 것 비동기 스토리지는 앱이 데이터를 저장할 수있는 주요 가치 저장소입니다. 이 데이터는 객체의 상태로 비동기 스토리지에서 넣을 수 있고,보기, 당신은 단지 당신이 당신의 인출 요청에서 데이터를 일단 상태로 설정할 수 있습니다 대신 설정 및 비동기 스토리지에서 얻는 따라

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 
}