ReactJS - Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено)

Question

Я совершенно новичок в ReactJS.

И я следую этому учебнику на YouTube и следую каждому шагу.

Пока я не обнаружил, что мой код получил ошибку типа this

Поскольку я новичок в программировании ReactJS, я до сих пор не понимаю, что делать, и как я могу это исправить

В руководстве показано, как создать простое приложение CRUD, созданноев ReactJS и PostgreSQL

Здесь я предоставляю мой App.js код

import React, { Component } from 'react'; 
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(){
   super(); 
   this.state={
   title: 'Simple Guestbook',
  guestbooks: []
}
}
componentDidMount(){
console.log('Component has mounted')
}
addGuest(event){
event.preventDefault();

let data = {
  guestname: this.refs.guestname.value,
  guestaddress: this.refs.guestaddress.value
};
var request = new Request("http://localhost:3000/api/new-guest", {
  method: 'POST',
  headers: new Headers({'Content-Type': 'application/json'}),
  body: JSON.stringify(data)
});

//xmlhttprequests
fetch(request)
  .then(function(response){
    response.json()
      .then(function(data){
        console.log(data)
      })
  })
  }
render() {
let title = this.state.title;
return (
  <div className="App">
<h1>Assalaamu'alaykum</h1>
    <h2>{title}</h2>
    <form ref="guestbookForm">
      <input type="text" ref="guestname" placeholder="guest name"/>
      <input type="text" ref="guestaddress" placeholder="guest address"/>
      <button onClick={this.addGuest.bind(this)}>Add Guest</button>
    </form>
  </div>
);
}
}
export default App;

А вот мой server.js код:

 let express = require('express');
    let bodyParser = require('body-parser');
    let morgan = require('morgan');
    let pg = require('pg');

    const PORT = 3000;

    let pool = new pg.Pool({
    port:5432,
    password: 'qwerty',
    database: 'guestbook',
    max: 10,
    host: 'localhost',
    user: 'postgres'
    });

    let app = express();

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: true}));

    app.use(morgan('dev'));
    app.use(function(request, response, next) {
       response.header("Access-Control-Allow-Origin", "*");
       response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
      });
      app.post('/api/new-guest', function(request, response){
    console.log(request.body);
      });
      app.listen(PORT, () => console.log('Listening to Port '+ PORT));

Что мне делать?Любое предложение поможет мне решить эту проблему

Спасибо ...

Answer 1

Используйте функцию стрелки,

fetch(request)
  .then((response) => {
    return response.json()
  }).then((data) => {
        console.log(data)
 })