Следуя этому краткому руководству (React и PostgreSQL), следующее приложение должно распечатать выборку JSON. в терминал bash (~ 37 мин видео).

Однако этого не происходит. Отзывов о серверах npm или nodemon нет.

При добавлении значения через интерфейс firefox мгновенно отправляет обратно статус 404 (наблюдается в console: network). В chrome поток зависает как ожидающий, пока сервер nodemon не будет выключен (а затем выйдет из строя с ошибкой сброса соединения) (снова в консоли: сеть).

Npm запускает приложение, а nodemon запускает сервер.

app.js

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

class App extends Component {
  constructor(props) {
        super();  
        this.state = {
          title: 'Simple postgres app',
          treatments: []
        }
  }

  componentDidMount(){
        console.log('COMPONENT HAS MOUNTED')
  }   

  addStuff(event){
    event.preventDefault()
    // console.log('in method');

    let data = {
            test_field: this.refs.test_field.value,
    };

    var request = new Request('http://localhost:3000/api/new-thing', {
            method: 'POST', 
            headers: new Headers({ 'Content-Type': 'application/json' }),
            body: JSON.stringify(data), 
            message: console.log('JSON output: ', JSON.stringify(data))
    }); 

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

  render() {
    let title = this.state.title;
    return (
      <div className="App">
        <h1> { title } </h1>  
        <form ref = "testForm">
                        <input type="text" ref="test_field" placeholder="test_field"/> 
                        <button onClick={this.addStuff.bind(this)}>Add This</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,
//         user: 'postgres',
//         password: 'postgres',
//         database: 'po1dev_v0.0.1',
//         max: 10, //max connections
//         host: 'localhost'
// })

let app = express();

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

app.use(morgan('dev')); 

app.use((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-thing', (request,response) => {
//     console.log(request.body)
// })
app.post('/api/new-thing', function(request,response){
    console.log(request.body);
})

app.listen(PORT, () => console.log('Listening on port ' + PORT));

Любые идеи о том, что может вызывать проблемы 404 / зависания в firefox / chrome и как это исправить?

Ура

0
Bob Tewilliger 28 Ноя 2018 в 21:01

1 ответ

Лучший ответ

Это потому, что маршрут, который вы создаете, не возвращает никакого ответа, поэтому он бесконечно ждет ответа, а затем истекает время ожидания.

Маршрут должен возвращать какой-то ответ,

app.post('/api/new-thing', function(request,response){
    console.log(request.body);
    return response.json({"data": "Hello World"})
})

Что вернет {"data": "Hello World"} из маршрута /api/new-thing.

Кроме того, bodyParser.json - это функция, а не свойство. Измените это на

app.use(bodyParser.json())

Если вы используете create-react-app, попробуйте другой порт для внутреннего сервера. Потому что по умолчанию он использует 3000 для приложения реакции.

0
Aritra Chakraborty 28 Ноя 2018 в 19:54