node.js - 错误 :: DELETE http://localhost:3000/users/todo/delete/undefined 404(未找到)
问题描述
我正在尝试使用待办事项的 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;
- 删除待办事项:
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;
- 待办事项控制器:
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 作为待办事项的唯一键道具,以删除该特定列表项。
请问有人可以帮忙吗?
解决方案
非常感谢 Shyam,因为他帮助我极大地解决了这个问题。
正如他所提到的,我没有将 _id 传递给“DeleteToDo”组件。我需要按如下方式添加它:
<DeleteToDo _id={_id}/>
它也来自 localhost:3000/users/todo/delete/612dc2e3e0338ed3fcd7004f 而不是 localhost:3000/todo/delete/612dc2e3e0338ed3fcd7004f。
在更改 DeleteToDo 组件和路由之后,一切似乎都井井有条。
推荐阅读
- dart - 如何在飞镖中打印带有数字的浮点数
- javascript - 如何将按键事件发送/调度到 React 中的嵌入式 iframe?
- c# - Linq 中的特定查询它不执行与 SQL Server 中的内部联接相同的事情
- c++ - 生成以 6 为底的 3 个数字的所有数组表示的算法,具有特定的顺序?
- python - Python - 将目录中的所有 xlsx 文件合并到一个文件中
- reactjs - TypeError:运行测试时无法读取 null 的属性“标题”
- angular - D3 PIE图表在输入和更新角度应用程序时动画
- html - 如何在 GitHub README.md 中使用边距/填充?
- java - AWSIotMqttClient getConnectionStatus() 不显示实际连接状态
- sql - 如何在 SQL Server 中形成管理层次结构?