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

Question

我正在尝试向我的 MERN CRUD 应用程序添加更新功能，但我无法让更新正常工作。我不知道如何构建处理更新的函数或在应用程序和数据库之间传递命令的 API。每当我点击提交时，我都会收到 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 更新的Obj 的信息，所以我很确定来自表单的信息正在使它成为API。而且我很确定这是我忽略的小东西。

非常感谢您的帮助。

标签： javascriptreactjsmongodbaxios

Answer 1

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

在 submitItemEdits 函数中，axios 应该使用“put”而不是“post”方法