데이터를 올바르게로드하는 방법 네이티브 반응

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

나는 다음과 같은 기능을 추가합니다 :

constructor(props) { 
    super(props); 

    this.state = { 
     images: [] 
    } 

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

그런 다음이

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

처럼 사용할 수있는 희망이 도움이!