[英]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.