Запрос PUT API выборки Javascript

Я хочу обновить рейтинги книг. Пользователь отправит рейтинг для конкретной книги через форму. postRatings — это создатель действий, который отправляется компоненту с формой. Книги переменная содержит тот же объект книги, что и в файле json. Рейтинг обновляется для конкретной книги в переменной Books, а затем я хочу удалить старый объект и поместить этот обновленный объект. Но когда я пытаюсь это сделать, я получаю сообщение об ошибке 404: Not Found. Было бы здорово, если бы кто-нибудь мог указать, где я ошибаюсь, и помочь мне решить эту ошибку.

Файл JSON (Fake Rest API, созданный с использованием модуля узла json-server):

{
  "books": [
    {
      "id": "0",
      "title": "1984",
      "author": "George Orwell",
      "rating": "4.6",
      "points: "228",
      "total": "50
    },
    {
      "id": "1",
      "title": "To Kill a Mockingbird",
      "author": "Harper Lee",
      "rating": "4.8",
      "points: "241",
      "total": "50
    }
  ]
}

Создатель действий postRatings:

export const postRatings = (Books, title, rating) => (dispatch) => {  
  Books.some(function(obj){
    if (obj.title==title) {
      obj.total = parseInt(obj.total)+1;
        let newPts = parseInt(obj.points) + parseInt(rating);
        obj.points = ""+newPts;
        let newRating = (parseInt(obj.points) + parseInt(rating)) / parseFloat(obj.total);
        obj.ratings = ""+Math.floor(newRating * Math.pow(10, 1)) / Math.pow(10, 1).toFixed(1);
        return true;
    }   
  });
  fetch('localhost:3001/books', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(Books)
  })
  .then(response => {
    if (response.ok) {
      return response;
    } else {
        var error = new Error('Error- ' + response.status + ":" + response.statusText);
        error.response = response;
        throw error;
    }
  },
  error => {
    var errmess = new Error(error.message);
    throw errmess;
  })
  .then(response => response.json())
  .then(response => {console.info("response:"+JSON.stringify(response)); alert("Rating Added!")})
  .catch(error => {console.info('Error Message: '+ error.message)
    alert("Some Problem Occurred.\nError: "+error.message);
  });
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
2 125
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны указать идентификатор объекта, который хотите обновить. см. маршрут json-сервера по умолчанию

поэтому в URL-адресе выборки добавьте идентификатор книги в конце маршрута.

fetch(`localhost:3001/books/${Books.id}`)

Ах! это решило проблему. Я пытался обновить весь объект книги, а не конкретную книгу. Я тоже пропустил несколько маршрутов для PUT. Спасибо, что выручили меня :-)

Keval Dhanani 19.12.2020 11:35

@KevalDhanani Пожалуйста. Рад, что смог помочь

vigor akbar 19.12.2020 12:16

Другие вопросы по теме