TypeError：this.props.onDelete 不是函数

Question

我正在使用 react.js 开发事件 crud 应用程序，但出现此错误：

TypeError：this.props.onDelete 不是函数

这是用户界面：

这是我点击删除时的错误：

当我点击编辑时，我也会遇到同样的错误。

这是代码：

import React, { Component } from "react";

class Event extends Component {

  onDelete = () => {

    // console.log('event ', this.props.event.id);

    this.props.onDelete(this.props.id);

  };

  onEdit = () => {

    // console.log('event ', this.props.event.id);

    this.props.onEdit(this.props);

  };

  render() {

    const { id, eventname, eventdescription } = this.props.event;

    return (

      <tr>

        <td>{id}</td>

        <td>{eventname}</td>

        <td>{eventdescription}</td>

        <td>

          <button onClick={this.onEdit}>Edit</button>

          <button onClick={this.onDelete}>Delete</button>

        </td>

      </tr>

    );

  }

}

export default Event;

Answer 1

<Event&nbsp;key={event.id}&nbsp;event={event}&nbsp;onDelete={this.onDelete}&nbsp;onEdit={this.onEdit}&nbsp;/>onDelete 未在 DisplayEvent 组件中声明

Answer 2

Event组件正在组件内部使用DisplayEvents。&nbsp;DisplayEvents正在将道具传递onDelete给Event.查看您的代码，onDeleteprop 的值是this.onDelete您尚未定义的值，DisplayEvents这意味着 undefined 正在传递给子组件（类似这样的 :&nbsp;<Event onDelete={undefined} >）。contructor您可以通过安慰组件中的道具来检查这一点Event。您需要在父级中定义您的函数，然后将其作为道具传递给子级。您可以查看 sanbox链接以供参考