PLEASE, HELP ME! 
Section Calling Backend Services 24.
I can post new movie but cannot update the existing one. When I click the save button nothing happens and I see this error in the console:
Here is movieForm
import React from ‘react’;
import Form from ‘./common/form’;
import Joi from ‘joi-browser’;
import { getGenres } from ‘…/services/genreService’;
import { getMovie, saveMovie } from ‘…/services/movieService’;
class MovieForm extends Form {
state = { data: { title: "", genreId: "", numberInStock: "", dailyRentalRate: "" }, genres: [], errors: {} }; schema = { _id: Joi.string(), title: Joi.string().required().label('Title'), genreId: Joi.required().label('Genre'), numberInStock: Joi.number().min(0).max(100).required().label('Number In Stock'), dailyRentalRate: Joi.number().min(0).max(10).required().label('Daily Rental Rate') }; async populateGenres() { const { data: genres } = await getGenres(); this.setState({ genres: genres }); }; async populateMovie() { try { const movieId = this.props.match.params.id; if (movieId === 'new') return; const { data: movie } = await getMovie(movieId); this.setState({ data: this.mapToViewModel(movie) }); } catch (ex) { if (ex.response && ex.response.status === 404) return this.props.history.replace('/not-found'); } }; async componentDidMount() { await this.populateGenres(); await this.populateMovie(); }; mapToViewModel(movie) { return { _id: movie._id, title: movie.title, genreId: movie.genre._id, numberInStock: movie.numberInStock, dailyRentalRate: movie.dailyRentalRate }; }; doSubmit = async () => { await saveMovie(this.state.data); this.props.history.push('/movies'); }; render() {
movieService.js
import http from ‘./httpService’;
import config from ‘…/config.json’;
const apiEndPoint = config.apiUrl + ‘/movies’;
export function getMovies() {
return http.get(apiEndPoint);}
export function getMovie(id) {
return http.get(apiEndPoint + '/' + id);}
export function deleteMovie(movieId) {
return http.delete(apiEndPoint + '/' + movieId);}
export function saveMovie(movie) {
if (movie._id) { const body = { ...movie }; delete body._id; return http.put(apiEndPoint + '/' + movie.id, body); } return http.post(apiEndPoint, movie);}
httpService
import axios from ‘axios’;
import { toast } from ‘react-toastify’;
axios.interceptors.response.use(null, error => {
const expectedError = error.response && error.response.status >= 400 && error.response.status < 500; if (!expectedError) { console.log('Logging error: ', error); toast.error('An unexpected error occured'); } return Promise.reject(error);});
export default {
get: axios.get, post: axios.post, put: axios.put, delete: axios.delete};
So Im just following Mosh course without my app running. As Im almost at the end its fine… Thanks for your help! 