如何使用 React 访问嵌套的 Firebase 对象项

Question

我正在尝试从承诺的结果中获取文件的名称。到目前为止，我可以获得实际的文件 url 并将其显示为音频文件，但我不确定如何获取文件的名称。在 ul 元素中显示 Object 时，我只能从 Object 中显示 0 或 1。

const fileNames =  () =>{
        let temp = [];
        rootRef.listAll().then( function(res) {
            
            let promises = res.items.map(item => item.getDownloadURL());

            Promise.all(promises).then((downloadURLs)=>{
                        
                    // console.log(downloadURLs)
                    console.log(res.items)
                    setFiles(res.items)
                    setUrls(downloadURLs)
                    
                })
            //  console.log('dsds' + files[0]['name'])
            }).catch(function(error) {
            // Uh-oh, an error occurred!
        });
            
    
    }

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

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

            <div>
                {urls.map((url, index) => {
                  
                   return <audio controls key={index} src={url}> {url} </audio>
                })}
                
            </div>

        </>
    )

这是返回对象的控制台日志。如您所见，我试图获取一个name 参数，文件名是teabeat.mp3。还可以看到Object数组的开头是0，只是被显示了。

这里是完整的代码：

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
}

  // router is getting the current path name


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([]);   


    // Find all the prefixes and items.
   

        
    const fileNames =  () =>{
        let temp = [];
        rootRef.listAll().then( function(res) {
            
            let promises = res.items.map(item => item.getDownloadURL());

            Promise.all(promises).then((downloadURLs)=>{
                        
                    // console.log(downloadURLs)
                    console.log(res.items)
                    setFiles(res.items)
                    setUrls(downloadURLs)
                    
                })
            //  console.log('dsds' + files[0]['name'])
            }).catch(function(error) {
            // Uh-oh, an error occurred!
        });
            
    
    }

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

    


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

            <ul>
                {Object.keys(files).map((file, index) => {
                    console.log(file.name)
                    return <li key={index}> {file.name}</li>
                })}
            </ul>

            <div>
                {urls.map((url, index) => {
                  
                   return <audio controls key={index} src={url}> {url} </audio>
                })}
                
            </div>

        </>
    )
}

export default FolderPage

Answer 1

据我所知，查看存储文档中的object format，您应该能够获得每个对象的name 属性。所以：

<li key={index}>{file.name}</li>