使用 react js 和 express API 服务器发布带有 fetch 的对象 [英] 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({扩展:真实}));//连接配置const mc = mysql.createConnection({主机:'本地主机'，用户:'root'，密码:'12345'，数据库:'node_task_demo'，//socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'});//连接数据库mc.connect();//默认路由app.get('/', function (req, res) {return res.send({ error: true, message: 'hello' })});//这里我在客户端调用app.get('/todos', function (req, res) {mc.query('SELECT * FROM tasks', function (error, results, fields) {如果(错误)抛出错误；return res.send({ error: false, data: results, message: 'Todo list' });});});//搜索名称中带有bug"的待办事项app.get('/todos/search/:keyword', function (req, res) {var mensaje = '待办事项搜索列表.';让关键字 = req.params.keyword;mc.query("SELECT * FROM tasks WHERE task LIKE ?", ['%' + 关键字 + '%'], function (error, results, fields) {如果(错误)抛出错误；return res.send({ error: false, data: results, message: mensaje});});});//用id检索todoapp.get('/todo/:id', function (req, res) {让 task_id = req.params.id;如果(！task_id){return res.status(400).send({ error: true, message: '请提供 task_id' });}mc.query('SELECT * FROM tasks where id=?', task_id, function (error, results, fields) {如果(错误)抛出错误；return res.send({ error: false, data: results[0], message: 'Todos list.' });});});//添加一个新的待办事项app.post('/todo/meterla', function (req, res) {让任务 = req.body.task;如果(！任务){return res.status(400).send({ error:true, message: '请提供任务' });}//var task = req.body.task;var query = mc.query("INSERT INTO tasks SET ?", { task: task}, function (error, results, fields) {如果(错误)抛出错误；控制台日志(任务)；return res.send({ error: false, data: results, message: '新任务已成功创建.' });});});//用 id 更新待办事项app.put('/todo', function (req, res) {让 task_id = req.body.task_id;让任务 = req.body.task;如果 (!task_id || !task) {return res.status(400).send({ error: task, message: '请提供任务和task_id' });}mc.query("UPDATE tasks SET task = ? WHERE id = ?", [task, task_id], function (error, results, fields) {如果(错误)抛出错误；return res.send({ error: false, data: results, message: '任务更新成功.' });});});//删除待办事项app.delete('/todo', function (req, res) {让 task_id = req.body.task_id;如果(！task_id){return res.status(400).send({ error: true, message: '请提供 task_id' });}mc.query('DELETE FROM tasks WHERE id = ?', [task_id], function (error, results, fields) {如果(错误)抛出错误；return res.send({ error: false, data: results, message: '任务更新成功.' });});});//所有其他请求都重定向到 404app.all("*", function (req, res, next) {return res.send('找不到页面');下一个();});//端口必须设置为 8080 因为传入的 http 请求是从端口 80 路由到端口 8080app.listen(8081，函数(){console.log('Escuchando por el puerto 8081');});//允许 "grunt dev" 使用 livereload 创建开发服务器module.exports = 应用程序；

这是我的客户:

import React, { Component } from 'react';从'./logo.svg'导入标志；导入'./App.css';类 App 扩展组件 {构造函数(道具){超级(道具)；this.state = {数据:"}；this.state_2 = {消息:[]};this.onSubmit = this.handleSubmit.bind(this);}componentDidMount() {获取('/待办事项/1').then((响应) => response.json()).then((responseJson) =>{this.setState({消息:responseJson.data});})}处理提交(e){e.preventDefault();var self = this;//在提交表单时，将带有数据的 POST 请求发送到服务器.fetch('/todo/meterla',{方法:'POST'，身体:{任务:self.refs.task.value}}).then(功能(响应){返回 response.json()}).then(函数(体){控制台日志(正文)；警报(self.refs.task.value)});}使成为() {返回 (<div className="应用程序"><div className="App-header"><img src={logo} className="App-logo" alt="logo"/><h2>欢迎反应</h2>

<form onSubmit={this.onSubmit}><input type="text" placeholder="task" ref="task"/><输入类型=提交"/></表单><p className="App-intro">Este es el resultado de la Consulta = <b>{JSON.stringify(this.state.message)}</b></p>

);}}导出默认应用程序；

解决方案

body must be stringified + 不要忘记 content-type

 fetch('/todo/meterla',{方法:'POST'，正文:JSON.stringify({任务:self.refs.task.value}),标头:{内容类型":应用程序/json"}}).then(功能(响应){返回 response.json()}).then(函数(体){控制台日志(正文)；警报(self.refs.task.value)});

I am getting troubles with the post method in fetch because my server is receiving an empty object from the client. I've checked in the client side and can't send the value that I want to send.

This is my server:

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;

This is my client:

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;

解决方案

body must be stringified + don't forget the content-type

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

这篇关于使用 react js 和 express API 服务器发布带有 fetch 的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！