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 key={event.id} event={event} onDelete={this.onDelete} onEdit={this.onEdit} />

onDelete 未在 DisplayEvent 组件中声明

Answer 2

Event组件正在组件内部使用DisplayEvents。 DisplayEvents正在将道具传递onDelete给Event.

查看您的代码，onDeleteprop 的值是this.onDelete您尚未定义的值，DisplayEvents这意味着 undefined 正在传递给子组件（类似这样的 : <Event onDelete={undefined} >）。contructor您可以通过安慰组件中的道具来检查这一点Event。

您需要在父级中定义您的函数，然后将其作为道具传递给子级。

您可以查看 sanbox链接以供参考