Ich kann keine Daten von React Js zu Knoten js

Question

Ich bin Anfänger React Js und Node Js, ich bekomme ein Problem, ich kann nicht meine Daten von React Js zu Knoten Js, ich habe auf der Suche nach dem Weg, aber scheiterte alle, Ich weiß nicht warum.

Dies ist mein vollständiger Code.

Dies ist meine Antwortdatei 'member.js', die auf Port 3000 ausgeführt wird (http://localhost:3000/member).

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class Member extends Component { 
    constructor() { 
    super(); 
    this.state = { player: {} }; 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    fetch('http://localhost:4000/player', { 
     mode: 'no-cors', 
     method: 'post', 
     headers: { 
      "Content-Type": "text/plain" 
     }, 
     body: JSON.stringify({ 
      number: 123, 
      name: "John", 
      position: "Andrew" 
     }) 
    }).then(function(response) { 
     console.log(response); 
    }).catch(function(error) { 
     console.log('Request failed', error) 
    });  
    } 

    render() { 
    return (
     <div className="member-page"> 
     <form> 
      <input type="submit" onClick={this.handleSubmit.bind(this)} /> 
     </form> 
     </div> 
    ) 
    } 
} 
export default Member; 

und dies ist mein Knoten Datei 'player.js', laufen auf Port 4000 (http://localhost:4000/player).

var http = require('http'); 
var mysql = require('mysql'); 
var express = require('express'); 
var app = express(); 

var connection = mysql.createConnection({ 
    host: "localhost", 
    user: "root", 
    password: "", 
    database: "react_1" 
}); 

app.post('/player', function(req, res, next) { 

    res.header("Access-Control-Allow-Origin", "*"); 
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
     next(); 

    var player = req.body; 
    var query = connection.query('INSERT INTO player VALUES ?', player, function(err, result) { 
    // Neat! 
    }); 
    res.end('Success'); 
}); 

app.listen(4000, function() { 
    console.log('Example app listening on port 4000!'); 
}); 

Ich weiß nicht, wo ich einen Fehler machen, jemand bitte meinen Code entweder member.js oder player.js korrigieren.

Vielen Dank für die Hilfe.

Answer 1

const express = require('express') 
var bodyParser = require('body-parser') 
const app = express() 
var router = express.Router(); 
router.use(bodyParser.json());  // to support JSON-encoded bodies 
router.use(bodyParser.urlencoded({  // to support URL-encoded bodies 
    extended: true 
})); 

app.get('/', (req, res) => { 
    res.send('Hello World!') 
}) 

app.listen(5000,() => { 
    console.log('Example app listening on port 5000!') 
}) 

app.use('/', router); 

Versuchen Sie, Ihre Knoten-Server wie dieser

Answer 2

ich mit @robertklep zustimmen zu konfigurieren. Ich denke, das Problem ist in var player = req.body;

Versuchen:

installieren Körper-Parser npm Paket

npm i -S body-parser 

konfigurieren Körper-Parser

var http = require('http'); 
    var mysql = require('mysql'); 
    var express = require('express'); 
    var bodyParser = require('body-parser'); 
    var app = express(); 

    app.use(bodyParser.json()); // for parsing application/json 
    app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded 

    //enable CORS 
    app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
    }); 

    var connection = mysql.createConnection({ 
     host: "localhost", 
     user: "root", 
     password: "", 
     database: "react_1" 
    }); 

    app.post('/player', (req, res) => { 
     var player = req.body; 
     var query = connection.query('INSERT INTO player VALUES ?', player, (error, results, fields) => { 
      if (error) throw error; 
      // Neat! 
     }); 
     res.send('Success'); 
    }); 

    app.listen(4000, function() { 
    console.log('Example app listening on port 4000!'); 
    });