#node.js #sql-server #reactjs
#node.js #sql-сервер #reactjs
Вопрос:
Я пытаюсь отправить пару текстовых полей в свою базу данных 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 не отправляются какие-либо данные.
Спасибо!
Комментарии:
1. Поэтому, когда вы консоль. войдите в систему на стороне клиента , какие значения отправляются?
Ответ №1:
Спасибо за помощь, ребята. Я включил много рекомендаций, которые вы, ребята, дали, но последней каплей стало следующее в моем server.js код
app.use(express.json({
type: ['application/json', 'text/plain']
}));
Как только я включил это изменение, я смог устранить неопределенную ошибку, которую я получал
Ответ №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'})
});
Надеюсь, это поможет.
Комментарии:
1. Благодарю вас, сэр. Получение ошибки в части JSON.stringify «Ошибка типа: преобразование циклической структуры в JSON». Нужно перестроить организм?
Ответ №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
Комментарии:
1. Спасибо, но мои значения все еще не определены. Когда я утешаю. войдите в req.body, он просто возвращает {}