![](/img/trans.png)
[英]fetch POST returns only _id object in Express API server React FrontEnd
[英]Post an object with fetch using react js and express API server
我在 fetch 中遇到了 post 方法的問題,因為我的服務器正在從客戶端接收一個空對象。 我已經在客戶端簽入,但無法發送我想要發送的值。
這是我的服務器:
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
// connection configurations
const mc = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '12345',
database: 'node_task_demo',
//socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
});
// connect to database
mc.connect();
// default route
app.get('/', function (req, res) {
return res.send({ error: true, message: 'hello' })
});
// Here where I'm calling in the client side
app.get('/todos', function (req, res) {
mc.query('SELECT * FROM tasks', function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: 'Todo list' });
});
});
// Search for todos with ‘bug’ in their name
app.get('/todos/search/:keyword', function (req, res) {
var mensaje = 'Todos search list.';
let keyword = req.params.keyword;
mc.query("SELECT * FROM tasks WHERE task LIKE ? ", ['%' + keyword + '%'], function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: mensaje});
});
});
// Retrieve todo with id
app.get('/todo/:id', function (req, res) {
let task_id = req.params.id;
if (!task_id) {
return res.status(400).send({ error: true, message: 'Please provide task_id' });
}
mc.query('SELECT * FROM tasks where id=?', task_id, function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results[0], message: 'Todos list.' });
});
});
// Add a new todo
app.post('/todo/meterla', function (req, res) {
let task = req.body.task;
if (!task) {
return res.status(400).send({ error:true, message: 'Please provide task' });
}
//var task = req.body.task;
var query = mc.query("INSERT INTO tasks SET ? ", { task: task}, function (error, results, fields) {
if (error) throw error;
console.log(task);
return res.send({ error: false, data: results, message: 'New task has been created successfully.' });
});
});
// Update todo with id
app.put('/todo', function (req, res) {
let task_id = req.body.task_id;
let task = req.body.task;
if (!task_id || !task) {
return res.status(400).send({ error: task, message: 'Please provide task and task_id' });
}
mc.query("UPDATE tasks SET task = ? WHERE id = ?", [task, task_id], function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: 'Task has been updated successfully.' });
});
});
// Delete todo
app.delete('/todo', function (req, res) {
let task_id = req.body.task_id;
if (!task_id) {
return res.status(400).send({ error: true, message: 'Please provide task_id' });
}
mc.query('DELETE FROM tasks WHERE id = ?', [task_id], function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: 'Task has been updated successfully.' });
});
});
// all other requests redirect to 404
app.all("*", function (req, res, next) {
return res.send('page not found');
next();
});
// port must be set to 8080 because incoming http requests are routed from port 80 to port 8080
app.listen(8081, function () {
console.log('Escuchando por el puerto 8081');
});
// allows "grunt dev" to create a development server with livereload
module.exports = app;
這是我的客戶:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {data: ""};
this.state_2 = {message: []};
this.onSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
fetch('/todo/1')
.then((response) => response.json())
.then((responseJson) =>{
this.setState({
message: responseJson.data
});
})
}
handleSubmit(e){
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('/todo/meterla',{
method: 'POST',
body:{
task: self.refs.task.value
}
})
.then(function(response){
return response.json()
}).then(function(body){
console.log(body);
alert(self.refs.task.value)
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="task" ref="task"/>
<input type="submit"/>
</form>
<p className="App-intro">
Este es el resultado de la consulta = <b>{JSON.stringify(this.state.message)}</b>
</p>
</div>
);
}
}
export default App;
正文必須字符串化 + 不要忘記內容類型
fetch('/todo/meterla',{
method: 'POST',
body: JSON.stringify({
task: self.refs.task.value
}),
headers: {"Content-Type": "application/json"}
})
.then(function(response){
return response.json()
}).then(function(body){
console.log(body);
alert(self.refs.task.value)
});
嘗試使用 axios 而不是 fetch 我像這樣重寫了你的代碼,它工作得很好
服務器
const express = require('express');
const { Client } = require('pg');
const bodyParser = require('body-parser');
const app = express();
const cors = require("cors");
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/api/insertUsers', function(req, res) {
// console.log(req);
console.log(req.body);
res.send(req.body);
});
app.listen(3001, () => {
console.log('listening on port 3001');
});
反應(確保你安裝了 axios)
handleSubmit(e){
e.preventDefault(); var data = { name: "zadiki", contact: "0705578809", email: "zadiki", message: "test", } console.log("wow"); var url = ' http://localhost:3001/api/insertUsers'; axios.post(url,data) .then(response=>console.log(response)) .catch(e=>console.log(e)) }
看起來這就是問題所在。
constructor(props) {
super(props);
this.state = {data: ""};
this.state_2 = {message: []};
this.onSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
fetch('/todo/1')
.then((response) => response.json())
.then((responseJson) =>{
this.setState({
message: responseJson.data
});
})
}
在componentDidMount()
您正在設置'message'
的狀態。 但那是在this.state_2
。
我建議不要使用this.state_2
而是像這樣構建你的狀態:
this.state = {
data: '',
message: []
}
嘗試使用這樣的 fetch
fetch(url, {
method: "POST",
mode: "cors",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json; charset=utf-8",
},
redirect: "follow",
referrer: "no-referrer",
body: JSON.stringify(data)
}).then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson);
});
$(document).ready(()=>{
$("#formSignUp").submit(()=>{
fetch("/auth/sign/up",{
method:'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body:$("#formSignUp").serialize(),
})
.then((response)=>response.json())
.then(response=>{
}).catch(response=>{
});
return false;
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.