web-dev-qa-db-ja.com

反応jsとエクスプレスAPIサーバーを使用してフェッチでオブジェクトを投稿する

サーバーがクライアントから空のオブジェクトを受け取っているため、フェッチで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;
node.jsapireactjsexpressfetch
6
Ramses Serna

本文は文字列化する必要があります+ 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)
  });
11
monssef

フェッチの代わりにaxiosを使用してみてください私はこのようにurコードを書き直しました、そしてそれは完全に機能します

サーバ

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

1
Zadiki Hassan Ochola

このようなフェッチを使用してみてください

     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);
        });
0
Zadiki Hassan Ochola
$(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;
    });

});
0
Danilo Santos

これが問題のある場所のようです。

_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: []
}
_
0
Eponym