Reactjs TypeError.\u this.props.addPerson不是函数

每次尝试在react应用程序中添加人员时，我都会收到此错误。我有什么遗漏或做错了吗？我设法修复了原来的错误，但我觉得一旦我再次更改它，它就会返回。现在数据将不会显示在我的react应用程序中

import React, { Component } from 'react';
    import {SERVER_URL} from '../constants.js';
    import ReactTable from "react-table";
    import 'react-table/react-table.css'
    import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';
    import { confirmAlert } from 'react-confirm-alert';
    import 'react-confirm-alert/src/react-confirm-alert.css'
    import AddPerson from './AddPerson.js';

        class Personlist extends Component {
            constructor(props) {
                super(props);
                this.state = {Persons: []};
            }

            componentDidMount() {
                this.fetchPersons();
            }

            // Fetch all People
            fetchPersons = () => {
                fetch(SERVER_URL + 'api/persons')
                    .then((response) => response.json())
                    .then((responseData) => {
                        this.setState({
                            persons: responseData._embedded.persons,
                        });
                    })
                    .catch(err => console.error(err));
            };

            confirmDelete = (link) => {
                confirmAlert({
                    message: 'Are you sure to delete?',
                    buttons: [
                        {
                            label: 'Yes',
                            onClick: () => this.onDelClick(link)
                        },
                        {
                            label: 'No',
                        }
                    ]
                })
            };

            // Delete Person
            onDelClick = (link) => {
                fetch(link, {method: 'DELETE'})
                    .then(res => {
                        toast.success("Person deleted", {
                            position: toast.POSITION.BOTTOM_LEFT
                        });
                        this.fetchPersons();
                    })
                    .catch(err => {
                        toast.error("Error when deleting", {
                            position: toast.POSITION.BOTTOM_LEFT
                        });
                        console.error(err)
                    })
            };

            // Add new Person
            addPerson(person) {
                console.log(person);
                fetch(SERVER_URL + 'api/persons',
                    {   method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(person)
                    })
                    .then(res => this.fetchPersons())
                    .catch(err => console.error(err))
            }

            renderEditable = (cellInfo) => {
                return (
                    <div
                        style={{ backgroundColor: "#fafafa" }}
                        contentEditable
                        suppressContentEditableWarning
                        onBlur={e => {
                            const data = [...this.state.Persons];
                            data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                            this.setState({ Persons: data });
                        }}
                        dangerouslySetInnerHTML={{
                            __html: this.state.Persons[cellInfo.index][cellInfo.column.id]
                        }}
                    />
                );
            };

            render() {
                const columns = [{
                    Header: 'First Name',
                    accessor: 'firstName',
                    Cell: this.renderEditable
                }, {
                    Header: 'Last Name',
                    accessor: 'lastName',
                    Cell: this.renderEditable
                }, {
                    Header: 'Phone Numer',
                    accessor: 'phoneNumber',
                    Cell: this.renderEditable
                }, {
                    Header: 'Email',
                    accessor: 'email',
                    Cell: this.renderEditable
                }, {
                    id: 'delbutton',
                    sortable: false,
                    filterable: false,
                    width: 100,
                    accessor: '_links.self.href',
                    Cell: ({value}) => (<button onClick={()=>{this.confirmDelete(value)}}>Delete</button>)
                }];

                return (
                    <div className="App">
                        <AddPerson addPerson={this.addPerson} fetchPersons={this.fetchPersons}/>
                        <ReactTable data={this.state.persons} columns={columns}
                                    filterable={true} pageSize={10}/>
                        <ToastContainer autoClose={1500}/>
                    </div>
                );
            }
        }

export default Personlist;

import React，{Component}来自'React'；
从“../constants.js”导入{SERVER_URL}；
从“反应表”导入反应表；
导入“react table/react table.css”
从'react toastify'导入{ToastContainer，toast}；
导入“react-toastify/dist/react-toastify.css”；
从“反应确认警报”导入{confirmAlert}；
导入'react confirm alert/src/react confirm alert.css'
从“./AddPerson.js”导入AddPerson；
类Personlist扩展了组件{
建造师（道具）{
超级（道具）；
this.state={人：[]}；
}
componentDidMount（）{
this.fetchPersons（）；
}
//召集所有人
fetchPersons=（）=>{
获取（服务器URL+“api/persons”）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
人员：负责人数据，
});
})
.catch（err=>console.error（err））；
};
确认删除=（链接）=>{
确认员({
消息：“您确定要删除吗？”，
按钮：[
{
标签：'是'，
onClick:（）=>this.onDelClick（链接）
},
{
标签：‘否’，
}
]
})
};
//删除人
onDelClick=（链接）=>{
获取（链接，{method:'DELETE'}）
。然后（res=>{
toast.success（“删除的人”{
位置：toast.position.BOTTOM_左
});
this.fetchPersons（）；
})
.catch（错误=>{
toast.error（“删除时出错”{
位置：toast.position.BOTTOM_左
});
控制台错误（err）
})
};
//添加新人员
addPerson（个人）{
控制台日志（个人）；
获取（服务器URL+“api/persons”，
{方法：'POST'，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（person）
})
.then（res=>this.fetchPersons（））
.catch（err=>console.error（err））
}
RenderiTable=（cellInfo）=>{
返回(
{
const data=[…this.state.Persons]；
data[cellInfo.index][cellInfo.column.id]=e.target.innerHTML；
this.setState（{Persons:data}）；
}}
危险性西汀={{
__html:this.state.Persons[cellInfo.index][cellInfo.column.id]
}}
/>
);
};
render（）{
常量列=[{
标题：“名字”，
访问者：“名字”，
单元格：此为.renderEditable
}, {
标题：“姓氏”，
访问者：“lastName”，
单元格：此为.renderEditable
}, {
标题：“电话号码”，
访问者：“电话号码”，
单元格：此为.renderEditable
}, {
标题：“电子邮件”，
访问者：“电子邮件”，
单元格：此为.renderEditable
}, {
id:“delbutton”，
可排序：false，
可过滤：false，
宽度：100，
访问者：''u links.self.href'，
单元格：（{value}）=>（{this.confirmDelete（value）}}>Delete）
}];
返回(
);
}
}
导出默认个人列表；

下面是另一节课。我试过多次感冒，看看我是否错过了什么，但什么也找不到。是否有人认为有什么地方不对，或者我遗漏了什么

import React from 'react';
import SkyLight from 'react-skylight';

class AddPerson extends React.Component {
    constructor(props) {
        super(props);
        this.state = {firstName: '', lastName: '',  phoneNumber: '', Email: ''};
    }

    handleChange = (event) => {
        this.setState(
            {[event.target.name]: event.target.value}
        );
    };

    // Save Person and close modal form
    handleSubmit = (event) => {
        event.preventDefault();
        var newPerson = {firstName: this.state.firstName, lastName: this.state.lastName,
            phoneNumber: this.state.phoneNumber, email: this.state.email};
        this.props.addPerson(newPerson);
        this.refs.addDialog.hide();
    };

    cancelSubmit = (event) => {
        event.preventDefault();
        this.refs.addDialog.hide();
    };

    render() {
        return (
            <div>
                <SkyLight hideOnOverlayClicked ref="addDialog">
                    <h3>New person</h3>
                    <form>
                        <input type="text" placeholder="Fist Name"  name="firstName" onChange={this.handleChange}/><br/>
                        <input type="text" placeholder="Last Name" name="lastName" onChange={this.handleChange}/><br/>
                        <input type="text" placeholder="Phone Number" name="phoneNumber" onChange={this.handleChange}/><br/>
                        <input type="text" placeholder="Email" name="Email" onChange={this.handleChange}/><br/>
                        <button onClick={this.handleSubmit}>Save</button>
                        <button onClick={this.cancelSubmit}>Cancel</button>
                    </form>
                </SkyLight>
                <div>
                    <button style={{'margin': '10px'}} onClick={() => this.refs.addDialog.show()}>New person</button>
                </div>
            </div>
        );
    }
}

export default AddPerson;

从“React”导入React；
从“反应天窗”导入天窗；
类AddPerson扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={firstName:''，lastName:''，phoneNumber:''，Email:''}；
}
handleChange=（事件）=>{
这是我的国家(
{[event.target.name]：event.target.value}
);
};
//保存人员并关闭模式窗体
handleSubmit=（事件）=>{
event.preventDefault（）；
var newPerson={firstName:this.state.firstName，lastName:this.state.lastName，
电话号码：this.state.phoneNumber，电子邮件：this.state.email}；
this.props.addPerson（newPerson）；
this.refs.addDialog.hide（）；
};
取消提交=（事件）=>{
event.preventDefault（）；
this.refs.addDialog.hide（）；
};
render（）{
返回(
新人