Jsをノードjsとmysqlに接続するにはどうすればいいですか？

Question

ReactJをnodejsでmysqlに接続するときに問題が発生します。 これは私の完全なコードです。ポート上で実行されている、 'player.js'、

この

は私のファイル反応し、 'member.js' は、ポート3000

import React, { Component } from 'react'; 

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

    handleSubmit(e) { 
    e.preventDefault(); 
    var self = this; 

    fetch('/player', { 
     method: 'GET', 
     data: { 
     number: self.refs.number, 
     name: self.refs.name, 
     position: self.refs.position 
     } 
    }).then(function(response) { 
     return response.json(); 
     }).then(function(body) { 
     console.log(body); 
    }); 
    } 

    render() { 
    return (
     <div className="member-page"> 
     <form onSubmit={this.onSubmit}> 
      <input type="text" placeholder="Number" ref="number" /> 
      <input type="text" placeholder="Name" ref="name" /> 
      <input type="text" placeholder="Position" ref="position" /> 
      <input type="submit" /> 
     </form> 
     </div> 
    ) 
    } 
} 
export default Member; 

上で実行され、これが私のノードのファイルである4000

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

    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    res.header("Access-Control-Allow-Headers", "Content-Type"); 
    res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS"); 

    // Get sent data. 
    var player = req.body; 
    // Do a MySQL query. 
    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!'); 
}); 

データを入力しようとすると「Uncaught（promise）」SyntaxError：JSONの位置0で予期しないトークンSが表示されますが、理由はわかりません。誰でもこの問題を解決するのを助けてください。

ありがとうございます。

Answer 1

最初に、そのエラーが発生していますか？

'Content-Type': 'application/json'

：次に

は、あなたはその後、JSONペイロード

data : { 
    "number" : self.refs.number, 
    "name" : self.refs.name, 
    "position" : self.refs.position, 
} 

を構築する際に、アプリケーション/ JSONとしてヘッダにContent-Typeの設定を確認してくださいあなたの反応スクリプトに引用符を追加しようとすることができ