Блог

Я пытаюсь отправить пару текстовых полей в свою базу данных SQL с помощью React js через post-запрос, затем на стороне сервера я прослушиваю post и запрашиваю данные в своей базе данных. Прямо сейчас оба значения возвращают «undefined» независимо от того, что пользователь вводит в форму, поэтому я думаю, что я облажался с кодом на стороне 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..')});
  

И вот мой код react…

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, но я довольно новичок во всем этом, поэтому я не уверен, с чего начать устранение неполадок. Когда я утешаю.зарегистрируйте req.body на стороне сервера, он просто возвращает {} , поэтому кажется, что из скрипта react не отправляются какие-либо данные.

Спасибо!

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

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

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

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

 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'})
 });
  

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

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

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

этим:

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

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