如何通過節點js將React Js連接到mysql？

Question

使用nodejs將ReactJs連接到mysql時出現問題。 這是我完整的代碼。

這是我的React文件“ 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;

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

當我嘗試輸入數據時，出現類似“未捕獲（承諾）SyntaxError：位置0的JSON中意外的令牌S”之類的錯誤，我不知道為什么，我必須在兩天后再次向我的演講展示此職責，請任何人幫助我解決這個問題。

非常感謝你。

Answer 1

首先，您在哪里遇到該錯誤？

然后，在構造JSON有效負載時，您是否可以嘗試在自己的react腳本中添加引號

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

然后，確保將標頭上的Content-Type設置為application / json：

'內容類型'：'應用程序/ json'