Зацикливание изображений с разными идентификаторами

Question

В моем приложении "native-native" я пытаюсь зациклить изображения с разными идентификаторами и отобразить их на своем экране, я получаю идентификаторы правильно, но когда я пытаюсь зациклить их и отобразить в моем FlatList только изображение с последний идентификатор отображается бесконечно, вот мой цикл:

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