我已经连接了 expressjs、nodejs、reactjs 和 mysql。为什么我的代码在我重新启动我的快速服务器时工作正常但在我刷新页面时中断？

Question

users.js 快递文件夹

var express = require('express');
var router = express.Router();

const connection = require('./MySQL.js')

/* GET users listing. */
router.get('/', function(req, res, next) {

  connection.connect()

  connection.query("SELECT * FROM Users;", (err, rows) => {
    if(err) {
      res.status(404).send(err)
    } else {
      // console.log(rows)
      const result = Object.values(JSON.parse(JSON.stringify(rows)));
      console.log(result)
      // result.forEach((v) => console.log(v));
      res.send(rows)
    }
  })

  connection.end()
});

module.exports = router;

Login.js 在 react 文件夹中

import React from 'react'
// import { Link } from 'react-router-dom'
import './Login.css'

import { Header } from './Header'

export class Login extends React.Component {

    // constructor(props) {
    //     super(props)
    //     this.state = { users: [] }
    // }

    // componentDidMount() {
    //     fetch('/users')
    //         .then(res => res.json())
    //         .then(users => this.setState({ users }));
    // }

    render() {
        return (
            <div>
                <Header />
                <h2 id="login_h2">Log In</h2>
                <div className="login">    
                    <form id="login" method="get">    
                        <label>Username</label>    
                        <input type="text" name="Uname" className="login_info" placeholder="Username"/>    
                        <br/><br/><br/>

                        <label>Password</label>    
                        <input type="Password" name="Pass" className="login_info" placeholder="Password" />    
                        <br/><br/><br/>

                        <input type="button" name="log" id="log" value="Submit" />       
                        <br/><br/>

                        <input type="checkbox" id="check" />    
                        <span>Remember me</span>    

                        <a href="www.codecademy.com">Forgot Password?</a>    
                    </form>
                </div>
                <ShowUsers/>
            </div>
    
        )
    }
}


class ShowUsers extends React.Component {
  state = {users: []}

  componentDidMount() {
    fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

如果我在终端中 Ctrl^C 我的 express 服务器并重新启动它，我的代码可以正常工作并显示它应该显示的内容。但是，如果我刷新网站，除了应该从快递路线接收的内容外，一切正常。我在控制台中收到这些错误消息：

Login.js:56 GET http://localhost:3000/users 500 (Internal Server Error)
componentDidMount @ Login.js:56
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:18
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1


VM628:1 Uncaught (in promise) SyntaxError: Unexpected token P in JSON at position 0

我的快递服务器崩溃了，在终端中显示了这条错误消息：

events.js:353
      throw er; // Unhandled 'error' event
      ^

Error: Cannot enqueue Handshake after invoking quit.
    at Protocol._validateEnqueue (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\Protocol.js:215:16)
    at Protocol._enqueue (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\Protocol.js:138:13)
    at Protocol.handshake (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\Protocol.js:51:23)
    at Connection.connect (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\Connection.js:116:18)
    at C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\routes\users.js:40:14
    at Layer.handle [as handle_request] (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\express\lib\router\index.js:281:22
Emitted 'error' event on Connection instance at:
    at Connection._handleProtocolError (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\Connection.js:423:8)
    at Protocol.emit (events.js:376:20)
    at Protocol._delegateError (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\Protocol.js:398:10)
    at Handshake.<anonymous> (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\Protocol.js:232:10)
    at Handshake.emit (events.js:376:20)
    at Handshake.Sequence.end (C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\sequences\Sequence.js:78:12)
    at C:\Users\poppe\Documents\VSCode\Projects\vsc_projects\Track Our Choices 2\react-backend\node_modules\mysql\lib\protocol\Protocol.js:236:14
    at processTicksAndRejections (internal/process/task_queues.js:77:11) {
  code: 'PROTOCOL_ENQUEUE_AFTER_QUIT',
  fatal: false
}

我该如何解决这个问题？

Answer 1

connection.connect()接受一个回调函数，在回调函数中你需要执行数据库查询，所以代码如下

    connection.connect(function (error) {
    if (error){
        return res.status(404).send(error)
    } ;
    connection.query("SELECT * FROM Users;", (err, rows) => {
        if (err) {
            return res.status(404).send(err)
        } else {
            const result = Object.values(JSON.parse(JSON.stringify(rows)));
            console.log(result)
            // result.forEach((v) => console.log(v));
            return res.send(rows)
        }
    })
})

我已经连接了 expressjs、nodejs、reactjs 和 mysql。为什么我的代码在我重新启动我的快速服务器时工作正常但在我刷新页面时中断？

I have connected expressjs, nodejs, reactjs, and mysql. Why does my code work fine when I restart my express server but break when I refresh the page?

javascript

debugging

node.js

express

reactjs