循环使用不同 ID 的图像答案

【问题标题】：Looping images with different ID循环使用不同 ID 的图像
【发布时间】：2019-01-26 18:56:36
【问题描述】：

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

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

【问题讨论】：

标签： javascript react-native foreach

【解决方案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)) });
});

【讨论】：

push 返回数组的长度。

【解决方案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) });
});

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

【讨论】：

感谢您的帮助，但我正在使用 this.state.images 在 FlatList 中设置图像的 uri，它返回应该将其转换为有效的 url，请您帮忙?
@MaryJane 可以提供更多信息吗？确切的错误是什么？它出现在哪一行代码？你能提供一个你的网址的例子吗？
this.state。 images 返回其中的所有 url，我想这就是问题所在，我需要一个接一个地把它们设置在我的 FlatList 中的图像 uri 中，知道如何做到这一点吗？
@MaryJane 你能检查更新并告诉我这是否回答了你的问题吗？我也完全猜测您的images 内容是什么样的