データを正しく読み込む方法ネイティブ反応する

Question

私はグリッドに実装するAPIからイメージをロードしています。私のイメージは未定義であるため表示されません。私のコンポーネントのいくつかの機能があります。 ImagesとisLoadingはどちらもコンストラクタで空の配列とtrueに定義されています。

componentWillMount() { 
api().then((res) => { 
this.state.images.push(res); 
}).done(); 

this._load10Images(); 
this.setState({isLoading:false}); // is loading is set to false 
}         // after images loaded. 

_getImageUrls(){ 
api().then((res) => { 
this.state.images.push(res); 
console.log(this.state.images); //right here works array is growing 
console.log(this.state.images[0]);//with image uris 
}).done(); 
} 

_load10Images(){ 
for(let i=0; i<10; i++){ 
this._getImageUrls(); //call _getImageUrls 10 times to fill array 
} 


} 

_loadImageGrid(){ 

    if(this.state.isLoading){ 
return <Text>Loaading ...</Text> 
} 
else{ 
console.log(this.state.images[0]); // coming back as undefined 
return <Text>not loading ...</Text> 
    } 
} 

render(){ return <View> 
     {this._loadImageGrid()} 
     </View> 
    } 

イメージ配列は、render関数と_loadImageGrid関数では定義されていません。

Answer 1

私は、次の機能を追加します。この

api().then((res) => { 
    this._addImage(res); 
}); 

はそれが役に立てば幸いよう

constructor(props) { 
    super(props); 

    this.state = { 
     images: [] 
    } 

} 
_addImage(image) { 
    let images = Object.assign([], this.state.images); 
    images.push(image); 
    this.setState({images}); 
} 

次に、あなたがそれを使用することができます！