在 forEach 中调用 firebase 会使迭代不起作用答案

【问题标题】：calling firebase inside an forEach makes the iteration not work在 forEach 中调用 firebase 会使迭代不起作用
【发布时间】：2020-05-22 00:35:56
【问题描述】：

目标：

我正在尝试制作一个包含 3 个信息的对象数组：id、title 和 imageUri。但是，当我尝试从 firebase（an image download URL from firebase）获取 imageUri 值以在另一个组件中下载此图像时，@ 的迭代987654325@ 冻结。谢谢你的时间:)

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

观察：当我移除 firebase 部分 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"
      }
    ]

【问题讨论】：

标签： javascript firebase react-native expo firebase-storage

【解决方案1】：

基于 firebase 文档。 FIrebase 存储 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,
    })
}

此代码尚未测试。

【讨论】：