вызов firebase внутри forEach делает итерацию неработоспособной

Question

Цель:

Я пытаюсь создать массив объектов, включающий в себя 3 информации: id, title и imageUri. Но когда я пытаюсь получить значение imageUri из firebase ( URL-адрес загрузки изображения из firebase ), чтобы загрузить это изображение в другой компонент, итерация forEach зависает. Спасибо за ваше время:)

Предупреждение : [Отклонение необработанного обещания: Ошибка типа: JSON .stringify не может сериализовать циклические c структуры.]

наблюдение : Когда я удаляю часть базы огня imageUri: firebase..., все это работает!

функция:

    processData = ( data ) => {
        console.log('---------data received from loadData(Main.js:70)--------\n', data)
        var localProcessedData = [];

        Object.entries(data).forEach( ([key, value]) => {
          var event = {
            id: key,
            title: Object.getOwnPropertyDescriptor(value, "eventTitle").value,
            imageUri: firebase.storage().ref('events/active/' + key + '/image').getDownloadURL()
          }
          localProcessedData.push(event);
        })

        this.setState({
          processedData: localProcessedData,
          eventsDataIsLoaded: true,
        })
      }

Тип параметров, которые получает функция:

     Object {
      "-M-I83aV9t1fezOsBn17": Object {
        "active": true,
        "created": "2020-02-05T02:18:30.772Z",
        "description": "Olimpiadas Inter Atletica",
        "eventTitle": "oia",
        "location": "Uberlandia",
        "owner": "p87xn6x8DZTwb6qyTadhkk3UxJV2",
        "price": "130",
        "startDate": "15",
        "time": "14",
        "updated": "2020-02-05T02:18:30.772Z",
      },
      "-M-KlUH-zQhnIhb6wMH8": Object {
        "active": true,
        "created": "2020-02-05T14:34:20.399Z",
        "description": "Cia 2020",
        "eventTitle": "Cia",
        "location": "Uberlandia",
        "owner": "p87xn6x8DZTwb6qyTadhkk3UxJV2",
        "price": "130340",
        "startDate": "15",
        "time": "14",
        "updated": "2020-02-05T14:34:20.399Z",
      }
    }

Ожидаемый:

Моя цель - преобразовать все эти данные в массив следующим образом:

    Array [
      Object {
        "id": "-M-I83aV9t1fezOsBn17",
        "title": "oia",
        "imageUri": "image url from firebase"
      },
      Object {
        "id": "-M-KlUH-zQhnIhb6wMH8",
        "title": "Cia",
        "imageUri": "image url from firebase"
      }
    ]

Answer 1

На основании пожарной документации. FIrebase Storage getDownloadUrl - это обещание

https://firebase.google.com/docs/reference/js/firebase.storage.Reference.html#get -downloadurl

решение состоит в реализации асинхронного / ожидающего

async processData = ( data ) => {
    console.log('---------data received from loadData(Main.js:70)--------\n', data)
    var localProcessedData = [];

     Object.entries(data).forEach( async([key, value]) => {
      var event = {
        id: key,
        title: Object.getOwnPropertyDescriptor(value, "eventTitle").value,
        imageUri: await firebase.storage().ref('events/active/' + key + '/image').getDownloadURL()
       }
       localProcessedData.push(event);
    })

    this.setState({
      processedData: localProcessedData,
      eventsDataIsLoaded: true,
    })
}

этого кода не еще проверено.