如何列出所有名称并使用React JS从Firebase下载Urls？

Question

我想使用React JS显示所有文件的列表及其从Firebase下载的URL。但是我不能这样做，因为有两个单独的函数用于list（listAll（））和获取URL（getDownloadUrl（））。

storageRef.listAll().then( res => {

        const download = []

        res.items.forEach( down => {
         down.getDownloadURL().then( url => {

       //  res.items.forEach( item => {

          download.push(url); 
         // console.log(url)
        })
        this.setState({ download: download})
      })
})

storageRef.listAll().then( res => {

        const listItem= []

        res.items.forEach( item=> {


       //  res.items.forEach( item => {

          itemList.push(url); 

        })
        this.setState({ itemList: itemList})
      })
})

这将非常有帮助。预先感谢。

Answer 1

如果我理解正确，您想将所有文件的下载URL添加到该状态。在这种情况下，您正在寻找Promise.all()，如下所示：

storageRef.listAll().then( res => {
    let promises = res.items.forEach( item => item.getDownloadURL() );

    Promise.all(promises).then((downloadURLs) => {
        this.setState({ download: downloadURLs });
    });
})

---

如果您还想在该状态下存储项目列表，则可以在同一回调中执行此操作：

storageRef.listAll().then( res => {
    let promises = res.items.forEach( item => item.getDownloadURL() );

    Promise.all(promises).then((downloadURLs) => {
        this.setState({ download: downloadURLs, itemList: res.items });
    });
})