Axios> Express.router - метод обновления (.put), возвращающий 404

Question

Я пытаюсь завершить сборку последнего метода CRUD моего приложения. (C, R и D) все сделано. Но обновление, кажется, надоедает. У меня есть функция, которая объединяет идентификатор объекта с новым содержимым для обновления. Я получаю
Error: Request failed with status code 404
, напечатанные на консоли.

Я думаю, что мне не удается получить доступ к элементу базы данных, используя идентификатор.

Функция, которая собирает данные иинициирует запрос

  handleClick(e) {
    e.preventDefault()
    const data = {
      id: this.props.sid, //someuniqueid
      body: {
        name: this.state.name, //foo
        details: this.state.details, //bar
        content: this.state.content, //baz
      },
    }
    api
      .updateSnippet(data)
      .then(result => {
        this.setState({
          name: '',
          details: '',
          content: '',
          message: `'${this.state.name}' has been created`,
        })
        setTimeout(() => {
          this.setState({
            message: null,
          })
        }, 2000)
        console.log('UPDATE DATA SUCCESS!')
      })
      .catch(err => this.setState({ message: err.toString() }))
  }

api.js - использует axios для запуска запроса (это может быть там, где у меня не получается).

import axios from 'axios'

const service = axios.create({
  baseURL:
    process.env.NODE_ENV === 'production'
      ? '/api'
      : 'http://localhost:5000/api',
  withCredentials: true,
})

const errHandler = err => {
  console.error(err)
  if (err.response && err.response.data) {
    console.error('API response', err.response.data)
    throw err.response.data.message
  }
  throw err
}

export default {
  service: service,

  updateSnippet(data) {
    console.log(data.id) //someuniqueid
    console.log(data.body) //{name: "foo", details: "bar", content: "baz"}
    return service
      .put('/snippets' + data.id, {
        data: data.body,
      })
      .then(res => res.data)
      .catch(errHandler)
  },

}

Snippet.js (схема)

const mongoose = require('mongoose')

const snippetSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, 'The snippet name is required'],
    minlength: 1,
  },
  details: {
    type: [String],
    default: [],
  },
  content: {
    type: String,
  },
})

const Snippet = mongoose.model('Snippet', snippetSchema)

module.exports = Snippet

Соответствующий маршрут в "route / snippets.js" - это также может быть где япадаю

router.put('/', function(req, res) {
  console.log(req.body)
  Snippet.findByIdAndUpdate(
    req.body.id,
    {
      name: req.body.name,
      details: req.body.details,
      content: req.body.content,
    },
    { new: true },
    function(err, response) {
      if (err) {
        console.log('we hit an error' + err)
        res.json({
          message: 'Database Update Failure',
        })
      }
      console.log('This is the Response: ' + response)
    }
  )
})

Answer 1

Вы отправляете идентификатор в URL, поэтому вам нужно проанализировать его из req.params.id. Я также вернул ответ.

routs / snippets.js

router.put("/:id", function(req, res) {
  console.log(req.body);
  Snippet.findByIdAndUpdate(
    req.params.id,
    {
      name: req.body.name,
      details: req.body.details,
      content: req.body.content
    },
    { new: true },
    function(err, response) {
      if (err) {
        console.log("we hit an error" + err);
        return res.json({
          message: "Database Update Failure"
        });
      }
      return res.send(response);
    }
  );
});

Также вам необходимо обновить эту строку в api.js. Просто добавьте / после фрагментов

   .put('/snippets' + data.id, {     => 
   .put('/snippets/' + data.id, {