javascript - ReactJS - 无法加载资源 : the server responded with a status of 404 (Not Found)

Question

我对 ReactJS 完全陌生。

然后我按照这个tutorial在 YouTube 上，我按照每个步骤操作。

直到我发现我的代码出现类似 this 的错误

由于我刚接触 ReactJS 编程，我仍然不明白该怎么做，我该如何解决这个问题

本教程展示了如何使用 ReactJS 和 PostgreSQL 构建一个简单的 CRUD 应用

我在这里提供我的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)
 })