Как отправить отправленные данные формы на локальный сервер

Question

Я пытаюсь создать очень простое приложение с полным стеком с помощью React и Node.У меня проблемы с получением интерфейса для отправки данных на сервер.Я получаю POST http://localhost:4000/ 500 (Internal Server Error) в моей консоли.Что мне нужно сделать, чтобы отправить данные, отправленные пользователем на сервер, чтобы я мог сохранить их в базе данных?

Код моей реакции

class App extends React.Component {
    constructor() {
        super();
        this.state = {text: ''}
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleSubmit(e) {
        e.preventDefault();
        fetch('http://localhost:4000/users', {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: this.state.text // trying to send this text to the server
        })
            .then((response) => {
                console.log('success writing to server', response)
            })
            .catch((err) => {
                console.log('error writing to server', err);
            })
    }

    handleChange(e) {
        this.setState({
            text: e.target.value
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input onChange={this.handleChange} type="text" placeholder="Name" ref="name" />
                <input type="submit" />
            </form>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Код моего сервера:

const express = require('express');
const mysql = require('mysql');

const port = process.env.port || 4000;
const app = express();

let db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'my_db'
})


app.use(express.static('public'));

app.post('/users', function (req, res) {
    console.log(req.body) // undefined
    // I would have thought that req.body.text would work but req.body is undefined
    db.query(`INSERT INTO users (user) VALUES ("${req.body.text}")`, function (err, result) {
        if (err) {
            console.log('error inserting into database', err.sqlMessage);
        } else {
            console.log('successful insertion into database', result);
        }
    });
    res.sendStatus(201);
});
app.listen(port, 'localhost');

Answer 1

Указывая "Content-Type": "application/json" в своем запросе, вы сообщаете серверу, что он получит объект JSON.
Однако отправляемое тело - this.state.text, которое является необработанным значением в ваших входных данныхстрока, а не JSON, поэтому ваш сервер видит ее как неопределенную.

Сначала нужно поместить ее в JSON, а затем преобразовать в строку, прежде чем отправить на сервер:

fetch('http://localhost:4000/users', {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({ textInput: this.state.text })
})

Другой способ - сообщить серверу, что он получит необработанный текст:

fetch('http://localhost:4000/users', {
    method: "POST",
    headers: {"Content-Type": "text/plain"}, //Expects a raw text body
    body: this.state.text
})

Более точное объяснение того, как использовать fetch, можно найти в следующей документации: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Answer 2

На вашем сервере Express отсутствует промежуточное программное обеспечение анализатора тела.Добавьте это перед вашими обработчиками маршрута:

app.use(express.json())

Также, как правило, вам нужно передать тело в JSON.stringify() при выполнении запроса fetch на стороне клиента.