循环使用不同ID的图像

Question

在我的react原生应用程序中，我试图循环使用不同id的图像并在屏幕上显示它们，我得到了正确的id，但当我尝试循环使用它们并在FlatList中显示它们时，只有最后一个id的图像会无限显示，这是我的循环：

IDs.forEach(async (element) => {
imagesList = await this.getImagePreview(element);
this.setState({images: imagesList });
});

Answer 1

imagesList是一个矩阵，因此您必须在每次forEach执行的最后一个索引中插入元素。您所做的是用一个元素覆盖它，这就是为什么只渲染最后一个元素的原因。请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

IDs.forEach(async (element) => { 
await this.setState({ images: this.state.images.push(this.getImagePreview(element)) });
});

Answer 2

每次设置图像的状态时，都会删除任何以前完成的请求。这意味着，最后结束的图像请求将是您将看到的请求。

您可以采用Promise.all方法：

Promise.all(IDs.map((element) =>this.getImagePreview(element))
.then(res=>{
this.setState({images: res.flat()});
});

或者这种方法

this.setState({ images: [] });
IDs.forEach(async (element) => {
const {images} = this.state;
imagesList = await this.getImagePreview(element);
this.setState({images: images.concat(imagesList) });
});

将直接从文档中获取的图像添加到FlatList：

render(){
const {images} = this.state;
return (
<View>
<FlatList
data={images}
keyExtractor={(item, index)=>index}
renderItem={({item}) => <Image style={{width: 50, height: 50}} source={{uri:item}} />}
/>
</View>
)
}