我正在从 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>
}
图像数组在渲染函数和 _loadImageGrid 函数中返回为未定义。
最佳答案
我会添加以下功能:
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);
});
希望对你有帮助!
关于javascript - 如何使用 React Native 从 api 加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38906608/