TypeError: this.props.onDelete is not a function

Question

我正在使用 react.js 开发一个事件 crud 应用程序，我收到此错误：

TypeError: this.props.onDelete is not a function

这是用户界面：

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

我也点击编辑时出现同样的错误。

这是代码：

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;

这是 DisplayEvent.js 文件

import React, { Component } from 'react';
import Event from './Event';
import axios from 'axios';

class DisplayEvent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '', loading: true, events: [] }; // use array here
  }

  componentDidMount() {
    this.setState({ loading: true });
    axios
      .get('http://127.0.0.1:8000/api/events')
      .then(response => {
        this.setState({ events: response.data, loading: false });
      })
      // .catch(function(error) {
      //   console.log(error);
      //   this.setState({loading: false});
      // });
      .catch((error) => { console.log(error); this.setState({loading: false}); });
  }

  render() {
    const { events, loading } = this.state; // get events from the state
    return (
      <div>
        <h1>Events</h1>
        <table className="table table-hover">
          <thead>
            <tr>
              <td>ID</td>
              <td>Event Name</td>
              <td>Event Description</td>
              <td width="200px">Actions</td>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
              <td>
              <h1>Loading events...</h1>
              </td>
            </tr>

            ) : (
              events.map(event => {
                return <Event key={event.id} event={event} onDelete={this.onDelete} onEdit={this.onEdit} />;
              })
            )}
          </tbody>
        </table>
      </div>
    );
  }
}
export default DisplayEvent;

这可能是什么问题？

Answer 1

<Event key={event.id} event={event} onDelete={this.onDelete} onEdit={this.onEdit} />

DisplayEvent 组件中没有声明 onDelete

Answer 2

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

查看您的代码， onDelete prop 的值是 this.onDelete，你没有在 DisplayEvents 中定义，这意味着，undefined 被传递给子组件（像这样：<Event onDelete={undefined} >）。您可以通过在 Event 组件的 contructor 中安慰道具来检查这一点。

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

你可以看看sanboxlink作为参考

TypeError: this.props.onDelete is not a function

TypeError: this.props.onDelete is not a function

javascript

crud

reactjs