javascript - 在 forEach 中调用 firebase 会使迭代不起作用

Question

目标:

我正在尝试创建一个包含 3 个信息的对象数组:id、title 和 imageUri。但是，当我尝试从 firebase 获取 imageUri 值(来自 firebase 的图像下载 URL)以在另一个组件中下载此图像时，迭代forEach 卡住。感谢您的宝贵时间:)

警告:[未处理的 promise 拒绝:TypeError:JSON.stringify 无法序列化循环结构。]

观察:当我删除 firebase 部分 imageUri: firebase... 时，整个事情就正常了!

the function:

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

The type of params the function recieve:

     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",
      }
    }

预期:

My goal is to transform that whole data in an array like this:

    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 文档。 FRebase Storage getDownloadUrl 是一个 promise

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

解决方案是实现 async/await

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

此代码尚未测试。