Блог

У меня есть обработчик событий для отправки записи в API. API — это список пива, и я пытаюсь отправить свою запись обратно в API с помощью метода добавления. Когда я отправляю свою запись, я получаю ошибку 400, но не ПЛОХОЙ ЗАПРОС. В предварительном просмотре ошибки указано ошибка: «Название пива должно быть определено».

Я полагаю, что моя проблема заключается в моих параметрах JSON stringify, но я не уверен, что поместить в это поле. Было бы здорово дать несколько советов. Спасибо.

  onSubmit(event) {
    event.preventDefault();
    fetch("https://beer.fluentcloud.com/v1/beer", {
      body: JSON.stringify(),
      headers: {
        "Accept" : "application/json",
        "Content-Type": "application/json"
      },
      method: "POST"
    });

    this.props.onAdd(this.nameInput.value, this.likesInput.value);
    this.nameInput.value = '';
    this.likesInput.value = '';
  }
  

Вы публикуете пустое тело, пожалуйста, поместите туда объект с заполненными желаемыми полями, например

 JSON.stringify({
 name: this.nameInput.value,
 likes: this.likesInput.value
});
  

Также, пожалуйста, обратите внимание, что fetch API возвращает Promise , поэтому я бы изменил ваш код, чтобы дождаться его разрешения:

 event.preventDefault();
fetch("https://beer.fluentcloud.com/v1/beer", {
  body: JSON.stringify({
    name: this.nameInput.value,
    likes: this.likesInput.value
  }),
  headers: {
    "Accept" : "application/json",
    "Content-Type": "application/json"
  },
  method: "POST"
}).then(() => {
  console.log('Submitted!');
  this.props.onAdd(this.nameInput.value, this.likesInput.value);
  this.nameInput.value = '';
  this.likesInput.value = '';
}).catch(e => console.error('Failed', e));