从Firebase存储中获取图像并使用地图功能进行渲染 [英] Getting images from firebase storage and rendering them with a map function

问题描述

我当前在Firebase存储器中有一个文件夹，如下所示:在此处输入图片描述

I current have a folder in my firebase storage that looks like this: enter image description here

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

I am trying to map through a cloud firestore collection and rendering a screen with list items that have the corresponding info and the image. My document field include IDs that have 0 and 1 for example so I have an easier method of finding the images that I have on firebase storage folder. This is the code I'm using to render:

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的字段如下所示:在此处输入图片描述

In the (item,index) you can assume the fields of item look like this: enter image description here

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

Also, if you check the second line there is a method call returnurl. That looks like this:

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

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

I am currently getting an error message of "of type NSMutableDictionary cannot be converted to a valid URL. What is wrong with my code? Or is there a more efficient way of mapping through a field and finding/downloading the image url to render the screen?

推荐答案

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

You can't call an async function in your render methods. If you need async data in rendering, you should start loading that data when the component mounts (or when any input for loading the data is available), and then put the data into the component's state once it's loaded.

例如参见

• Firebase存储:将图像下载到React map中的img src并放置到其中
• 来自Cloud Storage的图像为不重新投放.map列表中
• 如何更新将Firebase数据实时传输到React应用程序
• React Native如何读取实时数据库Firebase
• Firebase存储:将图像下载到React map中的img src并放入img src

• Firebase storage: download images to and put to img src in React map
• Image from Cloud Storage is not redendring in .map list
• How to update Firebase data to the React application in realtime
• React Native how to read Real Time Database Firebase
• Firebase storage: download images to and put to img src in React map

这篇关于从Firebase存储中获取图像并使用地图功能进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！