javascript - 迭代 Firebase 存储 URL 时如何在 React 中使用 Async 和 Await

Question

我正在使用 Firebase api 获取目录中所有文件的列表，然后我有一个forEach循环，我在其中获取 url 并将它们推送到临时数组中。最后我setUrls到临时数组但是当我控制台日志urls它是空的。我想我需要在代码中添加async和await，我已经尝试过了，它可能不起作用，可能是因为代码的结构是错误的，但我找不到任何关于如何以正确方式执行此操作的示例。

import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import  firebaseConfig from "../dropzone/config";

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    BrowserRouter,
    useParams
  } from "react-router-dom";


if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);

}else {
    firebase.app(); // if already initialized, use that one
}

  

const FolderPage =  () => {

    let {folder} = useParams();
  
    let fb_storage = firebase.storage();
    let storageRef = fb_storage.ref();  
    
    let rootRef = storageRef.child(folder);
    console.log(rootRef);

    const [files, setFiles] = useState([]); 
    const [urls, setUrls] = useState([]);      


    const fileNames = async () =>{
       
        rootRef.listAll().then( async function(res) {
            let temp = [];
            
            res.prefixes.forEach(function(folderRef) {
               
            });
            
            res.items.forEach( async function(itemRef) {
                // All the items under listRef.
                temp.push(itemRef.name)
                console.log(itemRef.name);

               


            });
            setFiles(temp);

            
            
            }).catch(function(error) {
            // Uh-oh, an error occurred!
            });
            
            let tempUrls = [];

            
            files.forEach(async function(file){
                var fileRef =  storageRef.child( folder + '/' + file);

                // Get the download URL
               await fileRef.getDownloadURL()
                    .then((url) => {
                    
                        tempUrls.push(url);
                        // console.log(tempUrls)
                    })
                    .catch((error) => {
                    
                        switch (error.code) {
                        case 'storage/object-not-found':
                            // File doesn't exist
                            break;
                        case 'storage/unauthorized':
                            // User doesn't have permission to access the object
                            break;
                        case 'storage/canceled':
                            // User canceled the upload
                            break;
                    
                        // ...
                    
                        case 'storage/unknown':
                            // Unknown error occurred, inspect the server response
                            break;
                        }
                    });

            })
            
            setUrls(tempUrls);
            console.log(urls);

            
    }

    useEffect(()=>{
        fileNames();
    },[])

    
    


    return (
        <>
            <div>hello {folder}</div>
            {/* <div>hello {folders}</div> */}

            <ul>
                {files.map((file, index) => {
                    return <li key={index}> {file}</li>
                })}
            </ul>

            <div>
                {urls.map((url, index) => {
                   return <a key={index} href={url}> {url} </a>
                })}
                
            </div>

        </>
    )
}

export default FolderPage

标签： javascriptreactjsfirebaseasync-await