错误 :: DELETE http://localhost:3000/users/todo/delete/undefined 404（未找到）

Question

我正在尝试使用待办事项的 ID 删除特定的待办事项。但是，我遇到了以下错误：

删除 http://localhost:3000/users/todo/delete/undefined 404（未找到）

请看下面：

我的代码如下：

- GetToDoList：

import React, { useState, useEffect } from "react";
import axios from "axios";
import moment from "moment";
import DeleteToDo from "./DeleteToDo";

const TodoList = ({ data }) => {
  const { Date, Todo, Due } = data;

  return (
    <tr>
      <td>{moment(Date).format("L")}</td>
      <td className="todotext">{Todo}</td>
      <td>{moment(Due).format("L")}</td>
      <td className="tdactions">
        <DeleteToDo />
      </td>
    </tr>
  );
};

const GetToDoList = () => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    axios({
      url: "/todos/gettodo",
      method: "get",
      headers: {
        "Content-type": "application/json",
      },
    })
      .then((res) => {
        const data = res.data;
        console.log("data:", data);
        setTodos(data.todos);
      })
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <header>
        <h1>To Do List</h1>
      </header>
      <table>
        <thead>
          <tr>
            <th className="thdate">CREATED:</th>
            <th id="thtodo">TO-DO:</th>
            <th className="thdate">DUE:</th>
          </tr>
        </thead>
        <tbody>
          {todos && todos.length >= 0
            ? todos.map((todo, _id) => <TodoList data={todo} key={_id} />)
            : null}
        </tbody>
      </table>
    </div>
  );
};

export default GetToDoList;

- DeleteToDo：

import React, { useState } from "react";
import axios from "axios";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
import Swal from "sweetalert2";


const DeleteToDo = ({ _id }) => {
  const [todos, setTodos] = useState([]);

  const remove = (e, _id) => {
    e.preventDefault();

    axios
      .delete(`todo/delete/${_id}`) //Have to send the JWT back to the Server, send via headers
      .then((response) => {
        const del = todos.filter((todo) => _id !== todo._id);
        setTodos(del);
        console.log("response", response);
        Swal.fire({
          icon: "success",
          confirmButtonColor: "#000000",
          timer: 3000,
          width: 400,
          title: "SUCCESS!",
          text: response.data.message,
        }).then(function () {
          window.location.reload();
        });
      })
      .catch((error) => {
        Swal.fire({
          icon: "error",
          confirmButtonColor: "#ff0000",
          width: 400,
          title: "ERROR!",
          text: error.response.data.message,
        }).then(function () {
          window.location.reload();
        });
      });
  };

  return (
    <div>
      <td className="tdactions">
        <FontAwesomeIcon
          icon={faTrashAlt}
          onClick={(e) => remove(e, _id)}
          id="removebutton"
          title="Remove"
        />
      </td>
    </div>
  );
};

export default DeleteToDo;

- TodoControllers：

const Todo = require("../models/todoModels.js");
const mongoose = require("mongoose");

exports.createController = (req, res) => {
  let todo = new Todo({
    Todo: req.body.Todo,
    Date: req.body.Date,
    Due: req.body.Due,
  });
  todo
    .save()
    .then((todos) => {
      return res.json({ message: "Todo created successfully.", todos });
    })
    .catch((err) => {
      return res.status(400).json({ message: "Error creating the todo.", err });
    });
};

exports.getAllTodosController = (req, res, next) => {
  Todo.find({})
    .then((todos) => {
      return res.json({ secret: "resource", todos });
    })
    .catch((err) => {
      return res
        .status(400)
        .json({ message: "Error getting the todos' information.", err });
    });
};

exports.removeOneController = (req, res) => {
  Todo.findByIdAndRemove(req.params.id)
    .then((todos) => {
      return res.json({ message: "Todo deleted successfully.", todos });
    })
    .catch((err) => {
      return res
        .status(400)
        .json({ message: "Error deleting the todo item.", err });
    });
};

我使用 id 作为待办事项的唯一键道具，以删除该特定列表项。

有人可以帮忙吗？

Answer 1

非常感谢 Shyam，因为他极大地帮助我解决了这个问题。

正如他所提到的，我没有将 _id 传递给“DeleteToDo”组件。我需要添加如下：

<DeleteToDo _id={_id}/>

它也是从 localhost:3000/users/todo/delete/612dc2e3e0338ed3fcd7004f 而不是 localhost:3000/todo/delete/612dc2e3e0338ed3fcd7004f 绘制的。

更改 DeleteToDo 组件和路由后，一切似乎都井然有序。