【问题标题】:not able to send the data to server using react and node js无法使用 react 和 node js 将数据发送到服务器
【发布时间】:2017-06-15 06:41:27
【问题描述】:

无法将数据发送到服务器。在反应的控制台部分显示已发送数据。但在控制台的服务器部分,它只显示 {}。我遇到了什么问题

这是我的反应部分

  import React from 'react';
    import axios from 'axios';
    class Createstudent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value: 'sri'};

        this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.target.value});
      }

      handleSubmit(event) {
        alert(this.state.value);
        axios.post('http://localhost:8080/create',{value:this.state.value})
        .then(function(response){
          console.log("datasent");
        })

      }



      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Name:
              <input type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }

    export default Createstudent;

这是我的服务器部分

      import config from './config';
import express from 'express';
const server = express();
import databaseInterface from './mongodbInterface';
import bodyParser from 'body-parser';
var urlencodedParser = bodyParser.urlencoded({extended : true});



server.set('view engine', 'ejs');
server.get('/', (req, res) => {
    res.render('index', {
        content: '...'
    })
});

server.get('/',function(req,res) {
  res.send("hello this is data");
  console.log("datasent");
})
var value;
  // databaseInterface.createStudent("srikanthgec", 11);
server.post('/create',urlencodedParser,function(req,res){
var response = {
  value : req.body.value
      //values : req.body.lastName
};
console.log(value);
  console.log( JSON.stringify(response));
  res.send(JSON.stringify(response));
})

【问题讨论】:

  • 您似乎没有正确设置body-parser。执行此var bodyParser = require('body-parser'); 并在设置var app = express() 后添加此app.use(bodyParser.urlencoded({ extended: true })),然后将此server.post('/create',urlencodedParser,function(req,res){ 更改为server.post('/create', function(req,res){,如果您看到正确的响应,请告诉我们。
  • 在我的控制台窗口中它显示为 undefined 而这个 {}
  • 您能上传您的server/index/app.js 代码以便我们检查。,您也安装了body-parser..?我想你有。

标签: node.js reactjs


【解决方案1】:

尝试将您的服务器代码更改为类似的内容...

import config from './config';
import express from 'express';
const server = express();
import databaseInterface from './mongodbInterface';
import bodyParser from 'body-parser';


server.use( bodyParser.urlencoded({ extended: true }) );
server.set('view engine', 'ejs');

server.get('/', (req, res) => {
    res.render('index', {
        content: '...'
    })
});

server.get('/',function(req,res) {
    res.send("hello this is data");
    console.log("datasent");
})

var value; // why?
// databaseInterface.createStudent("srikanthgec", 11);
server.post('/create', function(req,res){
    console.log('req.body',req.body); // remove it once you see the correct data.
    var response = {
        value : req.body.value
      //values : req.body.lastName
    };
    console.log(value);
    console.log( JSON.stringify(response));
    res.send(JSON.stringify(response));
})

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-05-01
    • 2019-01-29
    • 2020-06-30
    • 2014-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多