[英]Map function does not return items in React JSX
在我的 PlaylistsLinks 組件之外,我初始化folders
變量,然后運行 Firebase function 迭代所有文件夾名稱並將其推送到folders
數組。 我的 map function 不會遍歷我的folders
數組,即使我可以在我的組件中 console.log 我的數組。 為了使用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
創建一個 state 然后用獲取的文件夾列表更新它:
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
問題是您必須直接從 function 內返回您的 JSX。map
像這樣:
{folders.map((folder, index) => <li key={index}>{folder}</li>)}
或者:
{folders.map((folder, index) => (
<li key={index}>{folder}</li>
)}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.