Reactjs 我遇到一个错误，无法读取属性'；地图'；“未定义”的定义；在React中使用道具

我还没有反应过来。我正在实践pros概念，并试图通过props对象将数据传递到组件中。 我收到一个错误：TypeError:无法读取未定义的属性“map”

我使用了一个名为“App”的顶级组件和一个子组件“Table”

我不知道我的代码出了什么问题

App.js：

import React from 'react'
import Table from './Table'

class App extends React.Component{

   
    render() {
      const characters = [

        {
            name: 'Mouad EL Maamar',
            job: 'Frontend Developer',
    
        },
        {
            name: 'John Doe',
            job: 'Full Stack Developer',
    
        },
        {
            name: 'Zouhair El Jemli',
            job: 'Frontend Developer',
    
        },
    
    ]
      return (
        // eslint-disable-next-line react/jsx-no-comment-textnodes
        <div className="Container">
            <Table charachterData={characters} />
          </div>
         ) 
      }
  
    }
    export default App

从“React”导入React
从“./Table”导入表
类应用程序扩展了React.Component{
render（）{
常量字符=[
{
名称：“Mouad EL Maamar”，
作业：“前端开发人员”，
},
{
姓名：“约翰·多伊”，
作业：“完整堆栈开发人员”，
},
{
名称：“Zouhair El Jemli”，
作业：“前端开发人员”，
},
]
返回(
//eslint禁用下一行react/jsx无注释textnodes
) 
}
}
导出默认应用程序

表6.js：

import React from 'react'

const TableHeader = () => { 
    return (
        <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
       </thead> 
     )
    }   

    const TableBody = (props) => {
        const rows = props.characterData.map((row, index) => {
          return (
            <tr key={index}>
              <td>{row.name}</td>
              <td>{row.job}</td>
            </tr>
          )
        })
      
        return <tbody>{rows}</tbody>
      }

class Table extends React.Component{
 
render(){ 
    
// accessing the data using this.props.characterData to retrieve the data
    const {characterData} = this.props
    
    return (
            <table>
                <TableHeader />
                <TableBody characterData={characterData} />   
            </table>
        )
    }
}

export default Table

从“React”导入React
const TableHeader=（）=>{
返回(
名称
工作
)
}   
const TableBody=（道具）=>{
常量行=props.characterData.map（（行，索引）=>{
返回(
{row.name}
{row.job}
)
})
返回{rows}
}
类表扩展了React.Component{
render（）{
//使用this.props.characterData访问数据以检索数据
const{characterData}=this.props
返回(
)
}
}
导出默认表

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import './index.css';


ReactDOM.render(<App />, document.getElementById('root'))

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序
导入“./index.css”；
ReactDOM.render（，document.getElementById（'root'））

表体中有一个小的打字错误，请使用props.characterData代替

表头中的Typo-charachterData