Question

我当前在Firebase存储中有一个文件夹，如下所示： enter image description here

我正在尝试通过一个Firestore集合进行映射，并渲染一个屏幕，其中包含具有相应信息和图像的列表项。我的文档字段包含例如具有0和1的ID，因此我有一种更简单的方法来查找Firebase存储文件夹中的图像。这是我用来渲染的代码：

renderAccordion() {
    return this.state.accordionarr.map((item,index) => {
      const url = this.returnurl(this.state.displaydatestringversion, item.id);
      return(
        <View key={index}>
          <Accordion
            onChange={this.onChange}
            activeSections={this.state.activeSections}
          >
            <Accordion.Panel header= {item.name}>
              <List>
              <List.Item>
                <Image
                source = {{ uri: url }}
                style = {styles.sizer}
                ></Image>
              </List.Item>
                <List.Item>{item.protein}</List.Item>
                <List.Item>{item.carbohydrate}</List.Item>
              </List>
            </Accordion.Panel>
          </Accordion>
        </View>
      );
    });
  }

在（item，index）中，您可以假设item的字段如下所示： enter image description here

此外，如果您检查第二行，则有一个方法调用returnurl。看起来像这样：

returnurl = async(date, id) => {
    var ref = firebase.storage().ref(date+'/'+id+".jpg");
    const url = await ref.getDownloadURL();
    return url;
  }

我当前收到“ NSMutableDictionary类型的错误消息，无法将其转换为有效的URL。我的代码有什么问题？还是有一种更有效的方式来映射字段并查找/下载图像URL以渲染屏幕？

Answer 1

您不能在渲染方法中调用async函数。如果需要在渲染中使用异步数据，则应在装入组件时（或有任何用于装入数据的输入可用时）开始装入数据，然后在装入后将数据置于组件的状态。

例如参见

从Firebase存储中获取图像并使用地图功能进行渲染

1 个答案: