Использование React js для отправки некоторых текстовых полей в базу данных SQL

Question

Я пытаюсь отправить пару текстовых полей в свою базу данных SQL с помощью React js через запрос на публикацию, затем на стороне сервера я прослушиваю сообщение и запрашиваю данные в моей базе данных. Прямо сейчас оба значения возвращают «неопределенное» независимо от того, что пользователь вводит в форму, поэтому я думаю, что я испортил код стороны React. Это код, который я использую

Server.js

var express = require('express');
var app = express();
var sql = require("mssql");
const bodyParser = require('body-parser');
app.use(bodyParser.json());

var config = {
    user: 'user',
    password: 'pass',
    server: 'localhost', 
    database: 'Master' 
};


app.post('/', function(req, res) {
    res.set('Access-Control-Allow-Origin', '*');
    const { FirstName, LastName } = req.body;
    let connection = new sql.ConnectionPool(config, function(err) {
        let request = new sql.Request(connection);
        request.query("insert into persons (FirstName, LastName) values ('" + FirstName + "', '" + LastName + "')");
    });
    res.send({ message: 'Success'})
});

app.listen(5000, () => {console.log('Server is running..')});

А вот мой код реакции ...

postData.js :

import React, { Component } from 'react';

class postData extends Component {

    constructor() {
        super();
        this.state = { user: {} };
        this.onSubmit = this.handleSubmit.bind(this);
      }

      handleSubmit(e) {
        e.preventDefault();
        var self = this;
        // On submit of the form, send a POST request with the data to the server.
        fetch('http://localhost:5000', { 
            method: 'POST',
            body: {
              FirstName: self.refs.FirstName,
              LastName: self.refs.LastName
            }
          })
          .then(function(response) {
            return response.json()
          }).then(function(body) {
            console.log(body);
          });
      }
      render() {
        return (
          <form onSubmit={this.onSubmit}>
            <input type="text" placeholder="First Name" ref="FirstName"/>
            <input type="text" placeholder="Last Name" ref="LastName"/>
            <input type="submit" />
          </form>
        );
      }
}

export default postData;

Опять же, я почти уверен, что испортил код на стороне React, но я довольно новичок во всем этом, поэтому я не уверен, с чего начать устранение неполадок. Когда я console.log req.body на стороне сервера, он просто возвращает {}, поэтому кажется, что из сценария реакции не отправляются никакие данные.

Спасибо!

Answer 1

Спасибо за помощь, ребята.Я включил много рекомендаций, которые вы, ребята, дали, но последней каплей было следующее в моем файле server.js

app.use(express.json({
    type: ['application/json', 'text/plain']
  }));

Как только я включил это изменение, я смог устранить неопределенную ошибку, которую я получал

Answer 2

Добавьте эти строки в запросе на выборку:

fetch('http://localhost:5000', 
    { method: 'POST',
    headers: new Headers({
        "Content-Type":"application/json"
    }),
    body: JSON.stringify({ 
        FirstName: self.refs.FirstName,
         LastName: self.refs.LastName }) 
})

Тогда на вашем сервере

app.post('/', function(req, res) { 
    res.set('Access-Control-Allow-Origin', '*'); 
    const body = JSON.parse(req.body);
    let connection = new sql.ConnectionPool(config, function(err) { 
    let request = new sql.Request(connection);
    request.query("insert into persons (FirstName, LastName) values ('" + body.FirstName + "', '" + body.LastName + "')"); 
    });
     res.send({ message: 'Success'})
 });

Надеюсь, это поможет.

Answer 3

Чтобы ваш код работал, просто замените эту часть:

body: {
  FirstName: self.refs.FirstName,
  LastName: self.refs.LastName
}

этим:

body: {
  FirstName: self.refs.FirstName.value,
  LastName: self.refs.LastName.value
}

но я бы посоветовал вам поступить так же, как @Yousaf, и использовать React.createRef(); для создания ссылок на элементы в React

Answer 4

Похоже, вы используете ref для доступа к input элементам, чтобы получить их значения. Но вы не используете refs правильно.

Сначала вам нужно создать refs в конструкторе вашего компонента, по одному ref для каждого input элемента. Затем вам нужно присвоить refs элементам input.

Вот как должен выглядеть ваш компонент

class postData extends Component {

    constructor() {
        super();
        this.state = { user: {} };
        this.onSubmit = this.handleSubmit.bind(this);
        this.firstNameField = React.createRef(); // create ref for first name field
        this.lastNameField = React.createRef();  // create ref for last name field
    }

      handleSubmit(e) {
        e.preventDefault();
        var self = this;
        // On submit of the form, send a POST request with the data to the server.
        fetch('http://localhost:5000', { 
            method: 'POST',
            body: {
              FirstName: self.firstNameField.current.value,  // access field value
              LastName: self.lastNameField.current.value.    // access field value
            }
          })
          .then(function(response) {
            return response.json()
          }).then(function(body) {
            console.log(body);
          });
      }
      render() {
        return (
          <form onSubmit={this.onSubmit}>
            <input type="text" placeholder="First Name" ref={this.firstNameField}/>
            <input type="text" placeholder="Last Name" ref={this.lastNameField}/>
            <input type="submit" />
          </form>
        );
      }
}

export default postData;