如何使用节点 js 将 React Js 连接到 mysql？答案

【问题标题】：How to connect React Js to mysql with node js?如何使用节点 js 将 React Js 连接到 mysql？
【发布时间】：2017-09-19 14:22:12
【问题描述】：

使用 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!');
});

当我尝试输入数据时，我收到类似“Uncaught (in promise) SyntaxError: Unexpected token S in JSON at position 0”的错误，我不知道为什么，两天后我必须在我的演讲中表现出这个职责，请任何人帮我解决这个问题。

非常感谢。

【问题讨论】：

请将代码发布为块而不是图片，然后我们可以提供帮助
谢谢，我已经从图片改成块代码了。 @ShubhamJain
您正在调用 get 方法并且在您的 player.js 中您没有任何 get 方法您有 post 方法？是不是笔误？

标签： javascript mysql node.js reactjs

【解决方案1】：

首先，你在哪里得到这个错误？

那么，您能否在构建 JSON 有效负载时尝试在您的反应脚本中添加引号

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

然后，确保将标头上的 Content-Type 设置为 application/json ：

“内容类型”：“应用程序/json”

【讨论】：