.react 中的map函数带来了错误

Question

我正在编写这段代码，其中我必须在某些 div 中映射数组...

第一个代码包含映射和用户界面

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)

我尝试对 JSON 数据进行字符串化，但没有帮助 我还看到了 stackoverflow 的其他问题，但它们没有帮助

Answer 1

这里有一些问题我会讨论一下，然后在最后提供一个“有效”的数据示例。

1. {{folderTitle}}

   应该只是

   {folderTitle}

   。

2. class

   应该始终是

   className

   。
3. 在组件调用中，您使用的是

   cards={folders.files}

   ，而它应该是

   cards={folder.files}

   （“文件夹”单数，因为您从回调中获取

   folder

   变量）
4. 您的提供商值应该是

   value={folders}

   。
5. 我已经更换了

   map

   索引，转而使用对象 ID（请参阅 此处的陷阱部分了解原因）。
6. 多个子元素需要包装在一个父元素中 - 这就是为什么

   section

   组件中有一个额外的

   Folder

   元素。

const { useState, useContext, createContext } = React;

const initialData = [
  {
    id:1,
    title: 'DSA',
    files: [
      {
        title: 'codewala',
        id:2,
        language: 'cpp',
        code:':Ldkidm'
      },
      {
        title: 'codewala2',
        id:3,
        language: 'cpp',
        code:':Ldkidmccccccc'
      }
    ]
  }
];

const PlaygroundContext = createContext();

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

  return ( 
    <PlaygroundContext.Provider value={folders}>
      {children}
    </PlaygroundContext.Provider>
  );
}


function Folder({ folderTitle, cards }) {
  return (
    <section>
      <div className="folder-container">
        <div className="folder-header">
          <div className="folder-header-item">
            <span className="material-symbols-outlined" style={{color: "yellow"}}>{folderTitle}</span>
            <span>Folder 1</span>
          </div>
          <div className="folder-header-item">
            <span className="material-symbols-outlined">delete</span>
            <span className="material-symbols-outlined">edit</span>
            <button>
              <span className="material-symbols-outlined">add</span>
              <span>New File</span>
            </button>
          </div>
        </div>
      </div>
      <div className="cards-container">
        {cards.map((file) => {
          return (
            <div className="card" key={file.id}>
              <div className="title-container">
                <span>{file.title}</span>
                <span>Language: {file.language}</span>
              </div>
              <div style={{display: 'flex', gap: '10px'}}>
                <span className="material-symbols-outlined">delete</span>
                <span className="material-symbols-outlined">edit</span>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function App() {

  const folders = useContext(PlaygroundContext);

  return (
    <main>
      {folders.map((folder) => {
        return (
          <Folder
            key={folder.id}
            folderTitle={folder.title}
            cards={folder.files}
          />
        );
      })}
    </main>
  );

}

const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
const Root = () => (
  <PlaygroundProvider>
    <App />
  </PlaygroundProvider>
);
root.render(<Root />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<div id="root"></div>