props.OnNewTicketCreation 不是函数

Question

我在传递 prop 函数时遇到问题。我正在遵循教程，似乎无法识别我的道具的问题，所提出问题的解决方案与我的挑战无关，这是相当简单的

票证控制是基于类的组件持有状态。感兴趣的函数是

handleAddingNewTicketToList

。贴在下面

import React from 'react';
import NewTicketForm from './NewTicketForm';
import TicketList from './TicketList';
import TicketDetail from './TicketDetail';

class TicketControl extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            formVisibleOnPage: false,
            mainTicketList: [],
            slectedTicket: null,
        };
    }

    // handleClick = () => {
    //     this.setState(prevState => ({  // This function uses parentheses () around the object returned by the arrow function. This syntax indicates an implicit return, meaning that the object inside the parentheses is the return value of the arrow function.
    //         formVisibleOnPage: !prevState.formVisibleOnPage
    //     }))
    // }

    handleClick = () => {
        if (this.state.selectedTicket != null) {
            this.setState({
                formVisibleOnPage: false,
                selectedTicket: null,
            });
        } else {
            this.setState(prevState => ({
                formVisibleOnPage: !prevState.formVisibleOnPage,
            }));
        }
    }

    handleAddingNewTicketToList = (newTicket) => {
        const newMainTicketList = this.state.mainTicketList.concat(newTicket); // .concat creates a duplicate, .push doesnt
        this.setState({
            mainTicketList: newMainTicketList,
            formVisibleOnPage: false,
        });
    }

    handleChangingSelectedTicket = (id) => {
        const selectedTicket = this.state.mainTicketList.filter(ticket => ticket.id === id)[0];
        this.setState({ selectedTicket: selectedTicket })
    }

    handleDeletingTicket = (id) => {
        const newMainTicketList = this.state.mainTicketList.filter(ticket => ticket.id !== id);
        this.setState({
            mainTicketList: newMainTicketList,
            selectedTicket: null
        });
    }

    render() {
        let currentVisibleState = null;
        let buttonText = null;

        if (this.state.selectedTicket != null) {
            currentVisibleState = <TicketDetail ticket={this.state.selectedTicket} onClickingDelete = {this.handleDeletingTicket}/>
            buttonText = "Return to Ticket List"
        }
        else if (this.state.formVisibleOnPage) {
            currentVisibleState = <NewTicketForm
                onNewTicketCreation={this.handleAddingNewTicketToList}
            />
            buttonText = "Return to Ticket List";
        }
        else {
            currentVisibleState = <TicketList ticketList={this.state.mainTicketList} onTicketSelection={this.handleChangingSelectedTicket} />
            buttonText = "Add Ticket"
        }

        return (
            <React.Fragment>
                {currentVisibleState}
                <button onClick={this.handleClick}>{buttonText}</button>
            </React.Fragment>
        );
    }

}

export default TicketControl;

NewticketForm 处理添加新票并保存表单。

import React from "react";
import PropTypes from "prop-types";
import { v4 } from "uuid";
import ReusableForm from "./ReusableForm";

function NewTicketForm(props) {


    function handleNewTicketFormSubmission(event) {
        event.preventDefault();
        props.OnNewTicketCreation({
            names: event.target.names.value,
            location: event.target.location.value,
            issue: event.target.issue.value,
            id: v4(),
            // numberOfStudents: parseInt(event.target.numberOfStudents.value) // How to parse numeric data
        });

    }


    return (
        <React.Fragment>
            <React.Fragment>
                <ReusableForm
                    formSubmissionHandler={handleNewTicketFormSubmission}
                    buttonText="Help!" />
            </React.Fragment>
        </React.Fragment>
    );
}

NewTicketForm.propTypes = {
    OnNewTicketCreation: PropTypes.func,
    // func1: PropTypes.func,
}

export default NewTicketForm;

运行

props.OnNewTicketCreation({

时，第11行出现错误。我使用了断点并且可以从控制台返回该函数。

Answer 1

看起来是一个错字。

在 NewTicketForm 组件中，您尝试使用大写“O”调用 props.OnNewTicketCreation，但在 TicketControl 组件中，您使用小写“o”将 prop 作为 onNewTicketCreation 传递。

props.onNewTicketCreation({
    names: event.target.names.value,
    location: event.target.location.value,
    issue: event.target.issue.value,
    id: v4(),
});