在我的PlaylistsLinks组件之外,我初始化folders
变量,然后运行Firebase函数,该函数遍历所有文件夹名称并将其推入folders
数组。folders
即使我可以在组件中使用console.log数组,我的map函数也不会遍历数组。有没有一种特定的方法,我必须将数组传递给功能组件才能使用map
?
import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import firebaseConfig from "../dropzone/config";
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}else {
firebase.app(); // if already initialized, use that one
}
let fb_storage = firebase.storage();
let storageRef = fb_storage.ref();
let rootRef = storageRef.root;
let folders = [];
rootRef.listAll().then(function(res) {
res.prefixes.forEach(function(folderRef) {
// console.log(folderRef.name)
folders.push(folderRef.name)
// All the prefixes under listRef.
// You may call listAll() recursively on them.
});
res.items.forEach(function(itemRef) {
// All the items under listRef.
// console.log(itemRef.name);
});
}).catch(function(error) {
// Uh-oh, an error occurred!
});
const PlayListLinks = () =>{
console.log(folders);
return(
<>
<ul>
{folders.map((folder, index) => {
return <li key={index}> {folder}</li>
})}
</ul>
</>
)
}
export default PlayListLinks
创建一个状态,然后使用获取的文件夹列表对其进行更新:
import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import firebaseConfig from "../dropzone/config";
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}else {
firebase.app(); // if already initialized, use that one
}
let fb_storage = firebase.storage();
let storageRef = fb_storage.ref();
let rootRef = storageRef.root;
const PlayListLinks = () =>{
const [folders, setFolders] = useState([])
useEffect(()=>{
rootRef.listAll().then(function(res) {
let temp = []
res.prefixes.forEach(function(folderRef) {
temp.push(folderRef.name)
});
setFolders(temp);
res.items.forEach(function(itemRef) {
// All the items under listRef.
// console.log(itemRef.name);
});
}).catch(function(error) {
// Uh-oh, an error occurred!
});
},[])
console.log(folders);
return(
<>
<ul>
{folders.map((folder, index) => {
return <li key={index}> {folder}</li>
})}
</ul>
</>
)
}
export default PlayListLinks
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句