Javascript Map函数不返回React JSX中的项目

在playlislinks组件之外，我初始化

folders

变量，然后运行Firebase函数，迭代所有文件夹名称，并将其推送到

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

import React，{useState，useffect，useRef}来自'React'；
从“firebase/app”导入firebase；
从“firebase/storage”导入存储；
从“./dropzone/config”导入firebaseConfig；
如果（！firebase.apps.length）{
firebase.initializeApp（firebaseConfig）；
}否则{
firebase.app（）；//如果已经初始化，请使用该
}
设fb_storage=firebase.storage（）；
设storageRef=fb_storage.ref（）；
设rootRef=storageRef.root；
让文件夹=[]；
rootRef.listAll（）.then（函数（res）{
res.prefixes.forEach（函数（folderRef）{
//console.log（folderRef.name）
folders.push（folderRef.name）
//listRef下的所有前缀。
//可以对它们递归调用listAll（）。
});
res.items.forEach（函数（itemRef）{
//listRef下的所有项目。
//console.log（itemRef.name）；
});
}).catch（函数（错误）{
//哦，发生了一个错误！
}); 
常量播放链接=（）=>{
控制台日志（文件夹）；
返回(

{folders.map（（文件夹，索引）=>{
返回
{folder}
})}

)
}
导出默认播放链接

创建一个状态，然后用获取的文件夹列表更新它：

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

import React，{useState，useffect，useRef}来自'React'；
从“firebase/app”导入firebase；
从“firebase/storage”导入存储；
从“./dropzone/config”导入firebaseConfig；
如果（！firebase.apps.length）{
firebase.initializeApp（firebaseConfig）；
}否则{
firebase.app（）；//如果已经初始化，请使用该
}
设fb_storage=firebase.storage（）；
设storageRef=fb_storage.ref（）；
设rootRef=storageRef.root；
常量播放链接=（）=>{
const[folders，setFolders]=useState（[]）
useffect（（）=>{
rootRef.listAll（）.then（函数（res）{
设温度=[]
res.prefixes.forEach（函数（folderRef）{
临时推送（folderRef.name）
});
设置文件夹（临时）；
res.items.forEach（函数（itemRef）{
//listRef下的所有项目。
//console.log（itemRef.name）；
});
}).catch（函数（错误）{
//哦，发生了一个错误！
}); 
},[])
控制台日志（文件夹）；
返回(

{folders.map（（文件夹，索引）=>{
返回
{folder}
})}

)
}
导出默认播放链接

创建一个状态，然后用获取的文件夹列表更新它：

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

import React，{useState，useffect，useRef}来自'React'；
从“firebase/app”导入firebase；
从“firebase/storage”导入存储；
从“./dropzone/config”导入firebaseConfig；
如果（！firebase.apps.length）{
firebase.initializeApp（firebaseConfig）；
}否则{
firebase.app（）；//如果已经初始化，请使用该
}
设fb_storage=firebase.storage（）；
设storageRef=fb_storage.ref（）；
设rootRef=storageRef.root；
常量播放链接=（）=>{
const[folders，setFolders]=useState（[]）
useffect（（）=>{
rootRef.listAll（）.then（函数（res）{
设温度=[]
res.prefixes.forEach（函数（folderRef）{
临时推送（folderRef.name）
});
设置文件夹（临时）；
res.items.forEach（函数（itemRef）{
//listRef下的所有项目。
//console.log（itemRef.name）；
});
}).catch（函数（错误）{
//哦，发生了一个错误！
}); 
},[])
控制台日志（文件夹）；
返回(

{folders.map（（文件夹，索引）=>{
返回
{folder}
})}

)
}
导出默认播放链接

问题是您必须直接从.map中的函数返回JSX

像这样：

{folders.map((folder, index) => <li key={index}>{folder}</li>)}

{folders.map（（文件夹，索引）=>
{folder}
）}

或：

{folders.map（（文件夹，索引）=>(
{folder}
)}

问题是您必须直接从.map中的函数返回JSX

像这样：

{folders.map((folder, index) => <li key={index}>{folder}</li>)}

{folders.map（（文件夹，索引）=>
{folder}
）}

或：

{folders.map（（文件夹，索引）=>(
{folder}
)}

这是否回答了您的问题？您需要实现一个钩子来更新

文件夹

，以便呈现它。您是否能够检查

前缀中
foldeRef
的值。forEach

要知道对象是否存在，是否具有您期望的对象结构？我会放置一个调试器，并检查是否有回答你的问题？你需要实现一个钩子来更新

文件夹

，以便呈现它。你能在

前缀中检查
foldeRef
的值吗。forEach

要知道对象是否存在并且具有你期望的对象结构吗？我会放置一个调试器并检查它。这很有效。我有所以我尝试过使用useEffect，但我做得不对。谢谢。很高兴它帮助了我，欢迎，并愉快地编码：）很好。这很有效。我也尝试过使用useEffect，但我做得不对。谢谢。很高兴它帮助了我，欢迎，并愉快地编码：）