Javascript 如何修复CRUD应用程序中的404（未找到）错误？

我正在尝试向我的MERN CRUD应用程序添加更新功能，但无法使更新正常工作。我不知道如何构建处理更新的函数或在应用程序和数据库之间传递命令的API。每当我点击submit时，就会出现404错误

以下是我处理页面更新的函数：

  onSubmit = e => {
    e.preventDefault();
    const updatedObj = {
      bucketListItem_name: this.state.bucketListItem_name,
      bucketListItem_comment: this.state.bucketListItem_comment,
      bucketListItem_completed: this.state.bucketListItem_completed
    };

    API.submitItemEdits(this.props.match.params.id, updatedObj)
      .then(res => console.log(res.data))
      .catch(err => console.log(err));

      this.props.history.push("/");
  };

这是我的API：

  submitItemEdits: function(id, updatedObj) {
    return axios.post("/api/bucketList/" + id, updatedObj);
  }

如果需要，这里是控制器：

  update: function(req, res) {
    db.bucketListItem
      .findOneAndUpdate({ _id: req.params.id }, req.body, {upsert: true})
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  }

这是我的路线：

router
  .route("/:id")
  .get(listController.findById)
  .put(listController.update)
  .delete(listController.remove);

我已经能够在console.log中记录UpdateObj的信息，因此我非常确定表单中的信息与API中的信息是一致的。我很确定我忽略了一些小东西

---

非常感谢您的帮助。

在您的路由器中，您没有定义post方法

---

在SubmiteMedits功能中，axios应该在路由器中使用“put”而不是“post”方法，您不需要定义post方法

---

在submiteMedits功能中，axios应该使用“put”而不是“post”方法

axios.post

将数据发送到

router.post（'/api/bucketList/:id'，（）=>{}）

路由

所以它不会发送到正确的路由器。要更新，您需要将数据发送到

路由器.put（“/api/bucketList/：id”，（）=>{}）

---

为此，您需要使用

axios.put（）

而不是

axios.post（）

axios.post

将数据发送到

router.post（'/api/bucketList/：id'，（）=>{}）

路由

所以它不会发送到正确的路由器。要更新，您需要将数据发送到

路由器.put（“/api/bucketList/：id”，（）=>{}）

为此，您需要使用

axios.put（）

而不是

axios.post（）