React中folders.map is not a function错误排查求助

问题场景 #

我在编写React代码时，需要将数组映射渲染到多个div中，但映射过程中出现folders.map is not a function错误。尝试过JSON序列化数据，也查阅了相关问题，仍未解决。

UI组件代码 #

import { useContext } from "react";
import "./index.scss";
import { PlaygroundContext } from "../../../Providers/PlaygroundProvider";
// import { logo } from "./logo.png"
// import { vlogo } from "./vlogo.png";


const Folder = ({folderTitle, cards}) =>{
      <div className="folder-container">
                 <div className="folder-header">
                    <div className="folder-header-item">
                    <span class="material-symbols-outlined" style={{color: "yellow"}}>{{folderTitle}}</span>
                    <span>{"Folder 1"}</span>
                     </div>
                    <div className="folder-header-item">
                    <span class="material-symbols-outlined">delete</span>
                    <span class="material-symbols-outlined">edit</span>
                    <button>
                    <span class="material-symbols-outlined">add</span>
                    <span>New File</span>
                    </button>
                    </div>
                </div>
                <div className="cards-container">
                {
                  cards?.map((file, index) => {
                    return(  <div className="card" key={index}>
                      {/* Logo=> <span class="material-symbols-outlined">article</span> */}
                      <img src={require('./vlogo.png')} />
                        <div className="title-container">
                            <span>{file?.title}</span>
                            <span>Language: {file?.language} </span>
                         </div>
                        <div style={{display: 'flex', gap: '10px'}}>
                        <span class="material-symbols-outlined">delete</span>
                        <span class="material-symbols-outlined">edit</span>
                        </div>
                       
                    </div>)
                  })
                }
            </div>
          </div>
} 

export const RightComponent = () => {
  
  const folders = useContext(PlaygroundContext);
  console.log(folders); 


    return(
        <div className="right-container">
            <div className="header">
                Code Projects
                <button className="add-folder">
                <span class="material-symbols-outlined">add</span>
                    <span>New Folder</span>
                </button>
            </div>
            {
                  folders?.map((folder, index) => {
                    return<Folder folderTitle={folder.title} key={index} cards={folders.files}/>;
                  })  
            }
        

        </div>
    );
}

上下文容器代码 #

import { createContext, useContext, useEffect, useState } from "react";
import {v4} from 'uuid';

export const PlaygroundContext = createContext();

const initialData = [
    {
        id:v4(),
        title: 'DSA',
        files: [
            {
                title: 'codewala',
                id:v4(),
                language: 'cpp',
                code:':Ldkidm'
            },
            {
                title: 'codewala2',
                id:v4(),
                language: 'cpp',
                code:':Ldkidmccccccc'
            }
            
        ]

    }
]

export const PlaygroundProvider = ({children}) =>{
    const [folders, setFolders] = useState(initialData);


    useEffect(() => {
        localStorage.setItem('data', JSON.stringify(folders))
    },[])
    const uniqId = v4();
    // console.log(uniqId);
    const obj = {name: 'divyansh'};
    return( 
//  <>{children}</>
    <PlaygroundContext.Provider value={{folders}}> 
    {children}
</PlaygroundContext.Provider>
    );
};

错误信息 #

folders.map is not a function
TypeError: folders.map is not a function
    at RightComponent (http://localhost:3000/static/js/bundle.js:428:78)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:24807:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28778:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:30081:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:15063:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:15107:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:15164:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:35062:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:34310:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:34233:9)

解决方案 #

核心问题 #

上下文传递的是对象而非数组：在PlaygroundProvider中，你把value设为{folders}（这是一个包含folders数组的对象），但在RightComponent中直接将useContext返回值当作数组调用map，导致报错。

修复步骤 #

1. 修正上下文取值方式：在RightComponent中解构出数组：

// 原代码
const folders = useContext(PlaygroundContext);
// 修改为
const { folders } = useContext(PlaygroundContext);

2. 修正Folder组件的props传递：当前给cards传的是folders.files（整个数组的files属性），应改为当前遍历的folder对象的files：

// 原代码
return<Folder folderTitle={folder.title} key={index} cards={folders.files}/>;
// 修改为
return<Folder folderTitle={folder.title} key={index} cards={folder.files}/>;

3. 修复Folder组件的返回逻辑：当前Folder组件未返回JSX，需添加return或用括号包裹：

const Folder = ({folderTitle, cards}) =>{
  return (
      <div className="folder-container">
        {/* 其余代码保持不变 */}
      </div>
  )
}

4. 修正图标文本的语法错误：Folder组件中的{{folderTitle}}多了一层大括号，改为{folderTitle}：

<span class="material-symbols-outlined" style={{color: "yellow"}}>{folderTitle}</span>

5. 优化localStorage同步逻辑：原useEffect仅在组件挂载时执行，后续folders更新不会同步到localStorage，需添加依赖数组：

useEffect(() => {
    localStorage.setItem('data', JSON.stringify(folders))
},[folders])

完成以上修改后，folders会正确获取上下文里的数组，map方法可正常调用，子组件也能正确渲染对应文件夹的文件列表。

内容的提问来源于stack exchange，提问作者Divyansh Pathak