Question

我对ReactJS完全陌生。

然后我在YouTube中遵循此tutorial，并按照每个步骤进行操作。

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

自从我对ReactJS进行编程以来，我仍然不知道该怎么做，以及如何解决此问题

该教程显示了如何构建一个用ReactJS和PostgreSQL构建的简单CRUD应用程序

在此提供我的 App.js 代码

import os
os.path.abspath(".")

这是我的 server.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;

我该怎么办？任何建议都会帮助我解决这个问题

谢谢...

Answer 1

使用箭头功能，

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

ReactJS-无法加载资源：服务器响应状态为404（未找到）

1 个答案: