[英]How to access nested Firebase Object item with React
I'm trying to get the name of the file from the result of a promise.我试图从 promise 的结果中获取文件的名称。 So far I can get the actual file url and display it as an audio file but I'm not sure how to get the name of the file.到目前为止,我可以获得实际文件 url 并将其显示为音频文件,但我不确定如何获取文件名。 I can only display 0 or 1 from the Object when displaying it in the ul
element.在ul
元素中显示 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>
</>
)
Here is the console log of the object being returned.这是返回的 object 的控制台日志。 As you can see, there is a name
parameter that I'm trying to get with the name of the file being teabeat.mp3
.如您所见,我试图获取一个name
参数,文件名是teabeat.mp3
。 You can also see at the beginning of the Object array is the 0 that is only being displayed.您还可以在 Object 数组的开头看到仅显示的 0。
Here is the full code:这是完整的代码:
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
As far as I can tell from looking at the object format in the Storage documentation, you should be able to get the name
property of each object.据我所知,通过查看存储文档中的object 格式,您应该能够获得每个 object 的name
属性。 So:所以:
<li key={index}>{file.name}</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.