React组件传参报错：props.OnNewTicketCreation is not a function

问题描述 #

在学习React时，传递函数类型props遇到报错：props.OnNewTicketCreation is not a function。状态管理类组件TicketControl将自定义函数handleAddingNewTicketToList通过props传递给NewTicketForm组件，但在NewTicketForm的表单提交处理函数中调用该props函数时触发错误，错误位置在NewTicketForm组件第11行的props.OnNewTicketCreation({语句处。

相关组件代码 #

TicketControl组件代码 #

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 = () => {
        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属性名大小写不匹配：

• TicketControl中传递的props属性名为onNewTicketCreation（小写字母开头）
• NewTicketForm中调用和定义propTypes时却使用了OnNewTicketCreation（大写字母开头）

只需统一属性名的大小写即可修复：

修改后的NewTicketForm关键代码 #

function handleNewTicketFormSubmission(event) {
    event.preventDefault();
    // 修正为小写开头的属性名
    props.onNewTicketCreation({
        names: event.target.names.value,
        location: event.target.location.value,
        issue: event.target.issue.value,
        id: v4(),
    });
}

// ...

// 同步修正propTypes中的属性名
NewTicketForm.propTypes = {
    onNewTicketCreation: PropTypes.func,
}

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