無法將數據從React Js發佈到Node js

Question

我是初學者使用React Js和Node Js，我遇到問題，我無法將我的數據從React Js發佈到Node Js，我一直在尋找方式，但都失敗了，我不知道爲什麼。

這是我的完整代碼。

這是我的反應文件'member.js'，在端口3000（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; 

，這是我的節點文件 'player.js'，在端口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!'); 
}); 

我不知道我做了一個錯誤，請人糾正我的代碼，通過member.js或player.js。

非常感謝您的幫助。

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

嘗試配置您的節點服務器這樣

Answer 2

我@robertklep同意。我認爲問題在於var player = req.body;

嘗試：

安裝體解析器 NPM包

npm i -S body-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!'); 
    });