Question

每次尝试在我的应用程序中添加一个人时，我都会收到此错误。有什么我想念的或做错的吗？我设法解决了原始错误，但是我觉得一旦再次更改它就会返回。现在数据将不会显示在我的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 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;

Answer 1

尝试将addPerson函数绑定到personList组件，或将其更改为箭头函数。

TypeError._this.props.addPerson不是函数

1 个答案: