Блог

Я пытаюсь добавить функцию обновления в мое приложение 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);
  

Я смог утешить.запишите информацию для updatedObj, поэтому я почти уверен, что информация из формы доходит до API. И я почти уверен, что это что-то маленькое, что я упускаю из виду.

Заранее большое спасибо за вашу помощь.

axios.post отправит данные на router.post('/api/bucketList/:id' , ()=>{}) маршрут.

Таким образом, он не будет отправлен на правильный маршрутизатор. Для обновления вам необходимо отправить данные в router.put("/api/bucketList/:id", ()=>{}) .

Для этого вам нужно использовать axios.put() вместо axios.post()

В вашем маршрутизаторе вы не определяете метод post,

В функции SUBMITEMEDITS axios следует использовать метод «put» вместо «post»