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

【问题标题】：Map function does not return items in React JSXMap 函数不返回 React JSX 中的项目
【发布时间】：2021-03-26 12:43:30
【问题描述】：

在我的 PlaylistsLinks 组件之外，我初始化了 folders 变量，然后我运行了一个 Firebase 函数，该函数遍历所有文件夹名称并将其推送到 folders 数组。我的 map 函数不会遍历我的 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

【问题讨论】：

这能回答你的问题吗？ How do I return the response from an asynchronous call?
您需要实现其中一个钩子来更新folders 以便它被渲染。
您是否能够在prefixes.forEach 中检查foldeRef 的值，以了解该对象是否存在以及是否具有您期望的对象结构？我会放一个调试器并检查

标签： javascript reactjs firebase firebase-storage map-function

【解决方案1】：

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

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

【讨论】：

美丽。这行得通。我也尝试过使用 useEffect 但我做错了。谢谢。
很高兴它有帮助、欢迎和愉快的编码:)

【解决方案2】：

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

像这样：

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

或：

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

【讨论】：