Put All Data to Array From Firebase Storage in Asynchronous Function React Native

Question

i am trying to fetch all images in firebase storage. So far it works. But the problem is how to put ALL data inside array in asynchronous function and not just one then pass it into state?

My Code :

   async componentDidMount(){
        auth().signInAnonymously();

        var arr = [];
        var storageRef = storage().ref("/madu_mubarak/");
        await storageRef.listAll().then((result)=> {
            result.items.forEach((imageItem) =>{
              this.displayItem(imageItem)
            });
          }).catch(function(error) {
            console.warn("error "+error);
          });


    }

    async displayItem(imageItem){
        var arr = [];
        imageItem.getDownloadURL().
            then((url) => {
          console.warn("ur "+url)
          arr.push(url);
          this.setState({
            isLoad: false,
            urlImage: arr
          })
        }).catch((error) =>{
          console.warn("error "+error);
        });


        // return await Promise.all(arr);
    }

Please help. Thank you

Take a look at Promise.all([...]). You can pass it an array of promises and it resolves only when all promises in the array resolves — Tom Slutsky
– Tom Slutsky, Commented Apr 28, 2020 at 6:13
@TomSlutsky i already look at Promise.all. But i am still new at that so i dont understand how to implement. — Cookie
– Cookie, Commented Apr 28, 2020 at 7:00

Tom Slutsky · Accepted Answer · 2020-04-28 07:36:27Z

2

The main gist is this


async componentDidMount(){
        auth().signInAnonymously();


        var storageRef = storage().ref("/madu_mubarak/");
        await storageRef.listAll().then((result)=> {
           let promises = result.items.map((imageItem) =>{
              return imageItem.getDownloadURL()
            });
            Promise.all(promises).then(urls => this.setState({images: urls})

    }

You want to create an array of the promises returned from getDownloadUrl and the wait for all of them to resolve with Primise.all you can then assign the result to the state

answered Apr 28, 2020 at 7:36

Tom Slutsky

7346 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Put All Data to Array From Firebase Storage in Asynchronous Function React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related