node.js - MERN Stack - 使用 API 删除项目

Question

我无法弄清楚我在这里做错了什么。

我正在使用 MERN 堆栈并将 Axios 用于 HTTP 请求。理想情况下，我还希望有一个模式弹出窗口来确认删除，但仅仅解决删除功能让我发疯。我是 MERN 堆栈的新手，对于我试图完成的一些简单任务来说，它似乎过于复杂。任何输入都有帮助，在此先感谢。

GitHub 链接

我的 API 在 Postman 中工作：

workorderRoutes.route("/:id").delete(function(req, res) {
  WorkOrder.findById(req.params.id)
    .then(workorder => workorder.remove().then(() => res.json({ success: true })))
    .catch(err => res.status(404).json({ success: false }));
});

以下是我正在使用的组件：

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

const WorkOrder = props => (
  <tr>
    <td className={props.workorder.workorder_completed ? "completed" : ""}>{props.workorder.workorder_po}</td>
    <td className={props.workorder.workorder_completed ? "completed" : ""}>{props.workorder.workorder_name}</td>
    <td className={props.workorder.workorder_completed ? "completed" : ""}>{props.workorder.workorder_status}</td>
    <td className={props.workorder.workorder_completed ? "completed" : ""}>{props.workorder.workorder_shippingFrom}</td>
    <td className={props.workorder.workorder_completed ? "completed" : ""}>{props.workorder.workorder_completionDate}</td>
    <td>
      <Link className="btn btn-sm btn-primary" to={"/edit/" + props.workorder._id}>
        Edit
      </Link>
      <button className="btn btn-sm btn-danger" to={"/" + props.workorder._id}>
        Remove
      </button>
      <a className={props.workorder.workorder_completed ? "btn btn-sm btn-info" : "invisible"} href={"https://tools.usps.com/go/TrackConfirmAction?tRef=fullpage&tLc=2&text28777=&tLabels=" + props.workorder.workorder_tracking + "%2C"} target="_blank">
        Tracking
      </a>
    </td>
  </tr>
);

export default class WorkOrdersList extends Component {
  constructor(props) {
    super(props);
    this.state = { workorders: [] };
  }

  componentDidMount() {
    axios
      .get("http://matthicksdev.com:4000/workorders/")
      .then(response => {
        this.setState({ workorders: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  componentDidUpdate() {
    axios
      .get("http://matthicksdev.com:4000/workorders/")
      .then(response => {
        this.setState({ workorders: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  workorderList() {
    return this.state.workorders.map(function(currentWorkOrder, i) {
      return <WorkOrder workorder={currentWorkOrder} key={i} />;
    });
  }

  render() {
    return (
      <div>
        <h3>Work Order Status List</h3>
        <table className="table table-sm table-striped table-dark" style={{ marginTop: 20 }}>
          <thead>
            <tr>
              <th>Job ID</th>
              <th>Name</th>
              <th>Status</th>
              <th>Shipping From</th>
              <th>Completion/Ship Date</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>{this.workorderList()}</tbody>
        </table>
      </div>
    );
  }
}

对于我的生活，我似乎无法弄清楚如何从 MongoDB 中删除条目。

标签： node.jsreactjsmongodbexpress