Getting images from firebase storage and rendering them with a map function

问题

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

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

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

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;
  }

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?

回答1:

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.

See for example:

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

来源：https://stackoverflow.com/questions/62113020/getting-images-from-firebase-storage-and-rendering-them-with-a-map-function

标签

javascript

firebase

react-native

firebase-storage