React.js报Cannot read 'map' of undefined等报错如何解决

问题1：TypeError: Cannot read properties of undefined (reading 'map') #

错误原因 #

你用CommonJS规范的module.exports = notes导出数据，却用ES模块的命名导入语法import { notes } from '../../data/notes.js'导入，两种模块规范不匹配导致notes变量为undefined，调用map方法时报错。

修复方案 #

统一用ES模块规范处理导入导出：

1. notes.js导出语句改为export default notes，删除原来的module.exports = notes
2. MyNotes.js导入语句改为import notes from '../../data/notes.js'，去掉导入时的大括号

问题2：Error: Element type is invalid 组件类型无效报错 #

错误原因 #

你使用的是React Bootstrap v2及以上版本，该版本重构了Accordion组件的API，废弃了v1版本的Accordion.Toggle、Accordion.Collapse语法，旧写法对应的组件不存在，所以渲染时返回undefined报错。

修复方案 #

按照React Bootstrap v2的官方规范修改Accordion相关代码即可，修改后的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>
            <Accordion>
               {
                   notes.map((note) => (
                    <Accordion.Item eventKey={note._id} key={note._id}>
                        <Card style={{ margin: 10 }}>
                            <Card.Header style={{ display:"flex" }}>
                                <span style={{
                                    color:"black",
                                    textDecoration:"none",
                                    flex:1,
                                    cursor:"pointer",
                                    alignSelf:"center",
                                    fontSize:18
                                }}> 
                                <Accordion.Header as={Card.Text} variant='link'>
                                    {note.title} 
                                </Accordion.Header>
                                </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.Body>
                                <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.Body>
                        </Card>
                    </Accordion.Item>
                   ))
               }
            </Accordion>
        </MainScreen>
    )
}

export default MyNotes

核心修改点 #

• 把原来每个note外面的Accordion组件移到map外部，全局只放一个Accordion根组件
• 用Accordion.Item包裹每个note的内容，eventKey绑定每个note的唯一id_id，同时给每个Item加key属性避免React警告
• 替换Accordion.Toggle为Accordion.Header
• 替换Accordion.Collapse为Accordion.Body，无需再绑定eventKey

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