为什么我的删除按钮不能删除记录?我用的是mern堆栈。在console.log代码段2之后，状态似乎没有被设置。代码片段3映射数据，就好像记录从未被删除一样。我知道id正在从mongodb中拉出来。Stack说这主要是代码，所以我添加了更多的细节来填补空白。
recordList.js
import React, { Component } from "react";
// This will require to npm install axios
import axios from 'axios';
import { Link } from "react-router-dom";
const Record = (props) => (
<tr>
<td>{props.record.person_name}</td>
<td>{props.record.person_position}</td>
<td>{props.record.person_level}</td>
<td>
<Link to={"/edit/" + props.record._id}>Edit</Link> |
<a
href="/"
onClick={() => {
props.deleteRecord(props.record._id);
}}
>
Delete
</a>
</td>
</tr>
);
export default class RecordList extends Component {
// This is the constructor that will store our data retrieved from the database
constructor(props) {
super(props);
this.deleteRecord = this.deleteRecord.bind(this);
this.state = { records: [] };
}
// This method will get the data from the database.
componentDidMount() {
axios
.get("https://julio-mern-app.herokuapp.com/record/")
.then((response) => {
this.setState({ records: response.data });
})
.catch(function (error) {
console.log(error);
});
}
// This method will delete a record based on the id
deleteRecord(id) {
axios
.delete("https://julio-mern-app.herokuapp.com/" + id).then((response) => {
console.log(response.data);
});
this.setState({
record: this.state.records.filter((el) => el._id !== id),
});
}
// This method will map out the users on the table
recordList() {
return this.state.records.map((currentrecord) => {
return (
<Record
record={currentrecord}
deleteRecord={() => this.deleteRecord}
key={currentrecord._id}
/>
);
});
}
// This following section will display the table with the records of individuals.
render() {
return (
<div>
<h2> JulioCorp Software </h2>
<h3>Click 'Create Record' above to add your name if you are a...</h3>
<h3>Amazing Individual!</h3>
<h6>Make page wider if you do not see "Create Record" button. </h6>
<table className="table table-striped" style={{ marginTop: 20 }}>
<thead>
<tr>
<th>Name</th>
<th>Amazing Quality</th>
<th>Level</th>
<th>Action</th>
</tr>
</thead>
<tbody>{this.recordList()}</tbody>
</table>
</div>
);
}
}
和record.js
const express = require("express");
// recordRoutes is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const recordRoutes = express.Router();
//This will help us connect to the database
const dbo = require("../db/conn");
// This section will help you get a list of all the records.
recordRoutes.route("/record").get(function (req, res) {
let db_connect = dbo.getDb("employees");
db_connect
.collection("individuals")
.find({})
.toArray(function (err, result) {
if (err) throw err;
res.json(result);
});
});
// This section will help you create a new record.
recordRoutes.route("/record/add").post(function (req, res) {
let db_connect = dbo.getDb("employees");
let myobj = {
person_name: req.body.person_name,
person_position: req.body.person_position,
person_level: req.body.person_level,
};
db_connect.collection("individuals").insertOne(myobj, function (err, res) {
if (err) throw err;
});
});
// This section will help you update a record by id.
recordRoutes.route("/update/:id").post(function (req, res) {
let db_connect = dbo.getDb("employees");
let myquery = { id: req.body.id };
let newvalues = {
$set: {
person_name: req.body.person_name,
person_position: req.body.person_position,
person_level: req.body.person_level,
},
};
db_connect
.collection("individuals")
.updateOne(myquery, newvalues, function (err, res) {
if (err) throw err;
console.log("1 document updated");
});
});
// This section will help you delete a record
//recordRoutes.delete("/:id") <----!!!!! add this and test!!!!!----
//recordRoutes.route("/:id").delete
recordRoutes.route("/:id").delete((req, res) => {
let db_connect = dbo.getDb("employees");
let myquery = { id: req.body.id };
db_connect
.collection("individuals")
.deleteOne(myquery, function (err, obj) {
if (err) throw err;
console.log("1 document deleted");
});
});
module.exports = recordRoutes;
deleteRecord(id)
在这一行中，您从哪里获得id ?问题可能在链接:
https://julio-mern-app.herokuapp.com/
这里你没有提供删除API的路径