删除待办事项 - MERN 堆栈

Question

我一直在尝试在单击删除按钮时删除待办事项，但浏览器却抛出运行时错误："TypeError: props.deleteTodo is not a function"

我也仔细检查了方法名称，它们匹配，但我不知道为什么不能识别 onclick 函数。任何帮助将不胜感激。

这是我的代码：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const Todo = props => (
  <tr>
    <td className={props.todo.todo_status === "Completed" ? 'completed' : props.todo.todo_status === "In Progress" ? 'inprogress' : ''}>{props.todo.todo_desc}</td>
    <td className={props.todo.todo_status === "Completed" ? 'completed' : props.todo.todo_status === "In Progress" ? 'inprogress' : ''}>{props.todo.todo_responsible}</td>
    <td className={props.todo.todo_status === "Completed" ? 'completed' : props.todo.todo_status === "In Progress" ? 'inprogress' : ''}>{props.todo.todo_priority}</td>
    <td className={props.todo.todo_status === "Completed" ? 'completed' : props.todo.todo_status === "In Progress" ? 'inprogress' : ''}>{props.todo.todo_status}</td>
    <td className={props.todo.todo_status === "Completed" ? 'completed' : props.todo.todo_status === "In Progress" ? 'inprogress' : ''}>
      <Link to={'/edit/' + props.todo._id}>Edit</Link>&emsp;
      <button type="button" className="btn-danger" onClick={() => { props.deleteTodo(props.todo._id); }}>Delete</button>
    </td>
  </tr>
)

export default class TodoList extends Component {

  constructor(props) {
    super(props);
    this.deleteTodo = this.deleteTodo.bind(this);
    this.state = { todos: [] };
  }

  componentDidMount() {
    axios.get('http://localhost:8082/todos/')
      .then(res => {
        this.setState({ todos: res.data })
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  deleteTodo = (id) => {
    axios.delete("http://localhost:8082/todos/delete/" + id)
      .then(res => {
        console.log(res.data)
        this.props.history.push("/");
      })
      .catch(err => {
        console.log("Error Deleting Todo");
      })
  };

  componentDidUpdate() {
    axios.get('http://localhost:8082/todos/')
      .then(res => {
        this.setState({ todos: res.data })
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  todoList() {
    return this.state.todos.map(function (currentTodo, i) {
      return (
        <Todo
          todo={currentTodo}
          key={i} />
      );
    });
  };

  render() {
    return (
      <div>
        <h3>Todos List</h3>
        <table className="table table-hover" style={{ marginTop: 20 }}>
          <thead>
            <tr>
              <th>Description</th>
              <th>Responsible</th>
              <th>Priority</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {this.todoList()}
          </tbody>
        </table>
      </div>
    )
  }
}

Error Image

Answer 1

您定义并绑定了 deleteTodo，但是您在调用 <Todo 时没有将其作为父级的 prop 传递下去。这个：

todoList(){
    return this.state.todos.map(function (currentTodo,i){
        return (
            <Todo 
                todo={ currentTodo } 
                key={ i } />
        );
    });
};

应该是

todoList(){
    return this.state.todos.map((currentTodo, i) => (
        <Todo
            todo={currentTodo}
            key={i}
            deleteTodo={this.deleteTodo} />
    ));
};

您也可以删除该行

this.deleteTodo = this.deleteTodo.bind(this);

完全正确，因为您使用的是带有箭头函数的 class 字段。

删除待办事项 - MERN 堆栈

Deleting a todo - MERN Stack

javascript

mongodb

reactjs

mern