Question

在我的本机应用程序中，我试图循环使用不同ID的图像并将其显示在屏幕上，我正确地获得了ID，但是当我尝试循环它们并将其显示在FlatList中时，仅显示具有最后一个ID无限显示，这是我的循环：

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

Answer 1

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

您可以采用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) });
});

直接从文档中将images添加到您的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>
    )
  }

Answer 2

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)) });
});

循环使用不同ID的图像

2 个答案: