How can i solve this issue ? TypeError: Cannot read properties of undefined (reading 'map') in react.js

Question

notes.js(文件) :

const notes = [
    {
      _id: "1",
      title: "Day 1 of college",
      content:
        "I made a few new friends and introduced myself to a lot of new teachers.",
      category: "College",
    },
    {
      _id: "2",
      title: "Learned some Node JS",
      content: "Learned how to create a server in node JS and my first API",
      category: "Learning",
    },
    {
      _id: "3",
      title: "Watched some Anime",
      content: "Finished 2 seasons of Attack on Titan and My Hero academia.",
      category: "Entertainment",
    },
    {
      _id: 4,
      title: "Started React JS",
      content:
        "Made my first App in React JS, feels awesome to learn something new. I aim to be a full stack dev someday",
      category: "Learning",
    },
  ];
  
  module.exports = notes;

MyNotes.js(文件)

import React from 'react'
import { Link } from 'react-router-dom'
import { Accordion, Badge, Button, Card } from 'react-bootstrap'
import MainScreen from '../../components/MainScreen'
import { notes } from '../../data/notes.js'

const MyNotes = () => {

    const deleteHandler = (id) => {
        if(window.confirm("Are you sure?")){
             
        }
    }
    return (
        <MainScreen title='Welcome Deepak Sarkar'>
           <Link to="/createnote">
               <Button style={{ marginLeft: 10, marginBottom: 6, size:"lg"}}>
                   Create New Note
               </Button>
            </Link>
               {
                   notes.map((note) => (
                    <Accordion>
                        <Card style={{ margin: 10 }}>
                   <Card.Header style={{ display:"flex" }}>
                       <span style={{
                           color:"black",
                           textDecoration:"none",
                           flex:1,
                           cursor:"pointer",
                           alignSelf:"center",
                           fontSize:18
                       }}> 
                       <Accordion.Toggle as={Card.Text} variant='link' eventKey="0">
                           {note.title} 
                        </Accordion.Toggle>
                        </span>
                   <div>
                       <Button href={`/note/${note._id}`}>Edit</Button>
                       <Button 
                        variant='danger' 
                        className="mx-2"
                        onClick={() => deleteHandler(note._id)}>Delete</Button>
                   </div>
                    
                   </Card.Header>
                   <Accordion.Collapse eventKey="0">
                   <Card.Body>
                    <h4><Badge variant="success">
                        Category - {note.category} 
                    </Badge></h4>
                    <blockquote className="blockquote mb-0">
                  <p>{note.content}</p>
                 <footer className="blockquote-footer"> Created on -date </footer>
                </blockquote>
                </Card.Body>
                </Accordion.Collapse>
               </Card>
                    </Accordion>
                  
                   ))
               }
        </MainScreen>
    )
}

export default MyNotes

如果我从 import { notes } from '../../data/notes.js' 中删除“{}”并在 notes.js 中添加导出默认注释我收到此错误：错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查MyNotes的渲染方法。

谁能帮我解决这个问题？

Answer 1

您似乎混淆了所使用的 react-bootstrap 版本。 Accordion 组件 API 在 v1 (Bootstrap 4.6) 和 v2 (Bootstrap 5.1) 之间更改。

使用 react-bootstrap v1.6.4，您的代码可以正常工作。

V1 Accordion API

此版本包含 Accordion、Accordion.Toggle 和 Accordion.Collapse 个组件。

V2 Accordion API

v2 版本有更多选项 Accordion、Accordion.Item、Accordion.Header、Accordion.Body、Accordion.Button 和 Accordion.Collapse .

我建议坚持使用 v1.6.4 并保持现有代码正常运行。如果您想要或需要升级，那么有点不清楚您需要立即更改哪些组件才能具有类似的工作 UI/UX，但我怀疑新的手风琴组件将取代目前使用的一些卡片组件。

不过，您可以使用 notes 的命名或默认导出，只是不要使用 module.exports。

Answer 2

我发现的问题与您导入 notes.js 文件有关。使用 {} 您尝试在“notes”数组中获取“notes”对象。我已经对其进行了测试，没有 {} 并保留您拥有的 notes.js 文件，并为我工作。

 import notes from '../../data/notes.js'

希望能解决你的问题

How can i solve this issue ? TypeError: Cannot read properties of undefined (reading 'map') in react.js

How can i solve this issue ? TypeError: Cannot read properties of undefined (reading 'map') in react.js

javascript

frontend

node.js

reactjs

react-bootstrap