Как визуализировать содержимое хранилища файлов firebase в таблице при просмотре?

Question

Я хочу представить 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>

Просмотреть вывод:

Answer 1

Установите вспомогательный var для заполнения 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>
}