reactjs - 如何在视图的表格中可视化firebase的文件存储内容？

Question

我想在数据表中表示firebase存储的downloadUrl，我们可以在其中查看文件并下载到计算机。

目前我已成功获取所有文件和链接，但是如何在用户可以点击的表格中获取此链接。

获取所有 Firebase 存储的功能：

showFileUrl(){

   storageRef.child('UploadedFiles/').listAll().then(function(res) {
      res.items.forEach(function(folderRef) {
        folderRef.getDownloadURL().then(function(url) {

          console.log('Got download URL',url);
         });
        console.log("folderRef",folderRef.toString());
        var blob = null;
        var xhr = new XMLHttpRequest(); 
        xhr.open("GET", "downloadURL"); 
        xhr.responseType = "blob";       
        xhr.onload = function() 
        {
        blob = xhr.response;//xhr.response is now a blob object
        console.log("BLOB",blob)

        // var path = storageRef.child('UploadedFiles/').getDownloadURL(folderRef);
        // var zip = new JSZip();
        // zip.file(path,blob);
    }

        xhr.send();
      });

    }).catch(function(error) {
      console.log(error);
    });
  }

查看标签：

  <table>
          <tbody>

              {urls.map((user) => {
                            return (
                              <tr key={Math.random()}>
                                  <td>{user}</td>
                              </tr>);}
              )}     
        </tbody>
      </table>

查看输出：

标签： reactjsfirebasefirebase-storageredux-firestore

Answer 1

设置一个辅助变量以在到达时填充 url。

const urls = [];
res.items.forEach(function(folderRef) {
   folderRef.getDownloadURL().then(function(url) {
      urls.push(url);
   });
});

然后在状态设置一次，就可以进行下一步了。

this.setState({ urls }):

在视图中显示列表

render() {
  <div>
    {this.state.urls.map(url => (
       <a key={url} href={url}>url</url>
    ))
  </div>
}