Создание POST-запроса к SQL Server через React

Question

Я пытаюсь создать простую форму ввода текста, чтобы пользователь мог ввести свое имя и фамилию, а затем нажать кнопку Отправить.Я хотел бы, чтобы данные были обновлены на моем SQL Server.Всякий раз, когда я пытаюсь сделать запрос, я получаю сообщение об ошибке

Неожиданный токен S в JSON в позиции 0

Это код, который я использую:

server.js :

var express = require('express');
var app = express();
var sql = require("mssql");

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

app.post('/', function(req, res) {
    res.set('Access-Control-Allow-Origin', '*');
    var user = req.body;
    var connection = new sql.ConnectionPool(config, function(err) {
    var request = new sql.Request(connection);
    request.query('INSERT INTO Persons SET ?', user);
    });
    res.end('Success');
  });

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

А вот код реакции:

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',
            data: {
              FirstName: self.refs.FirstName,
              LastName: self.refs.LastName
            }
          })
         .then(function(response) {
            //this is the line that is giving me the error
            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;

Я получаю сообщение об ошибке со стороны реакции.Не уверен, как это настроить.Любые идеи, где я мог облажаться?Спасибо !!!

Answer 1

Данные, которые ваше приложение реагирует на экспресс, - это просто необработанный текст.Попробуйте добавить body-parser в ваше экспресс-приложение, а затем деконструировать передаваемые значения. Вы можете вручную проанализировать тело в формате JSON, но было бы намного проще включить body-parser.body-parser также позволяет вам при необходимости анализировать тело вашего запроса в другие форматы.

Добавить body-parser в ваше экспресс-приложение:

const bodyParser = require('body-parser');
app.use(bodyParser.json());

Затем в вашем POSTзапрос, разобрать тело как это:

const { firstName, lastName } = req.body;
let connection = new sql.ConnectionPool(config, function(err) {
    let request = new sql.Request(connection);
    request.query(/* Your query to insert these values */);
});
res.end('Success');

Answer 2

Обычно вы получаете эту ошибку, потому что ответ является строкой, а не объектом JSON. Попробуйте изменить экспресс:

res.send({ message: 'Success'})

Я тоже не уверен, что вы правильно используете ссылки. Я мог бы попытаться перевести эти значения в состояние с помощью функции изменения:

handleChange = (e) => {
    this.setState(
        {
            [e.target.name]: e.target.value
        }
    )
}

И измените ваши входные данные на:

<input type="text" placeholder="First Name" name="FirstName" onChange={this.handleChange}/>

Тогда в вашей функции отправки:

FirstName: this.state.FirstName

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