提交表單資料后nodemon應用程式崩潰

我正在使用 react 開發注冊表并將資料存盤在 mysql 資料庫中。每次我開始運行服務器和客戶端應用程式時，我只能在表單上單擊一次提交。點擊后，資料存入資料庫，但服務器端出現如下錯誤：

[nodemon] starting `node server.js --port 3001`
running on port 3001
null
events.js:377
      throw er; // Unhandled 'error' event
      ^

Error: Connection lost: The server closed the connection.
    at Protocol.end (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\protocol\Protocol.js:112:13)
    at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:94:28)
    at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:526:10)
    at Socket.emit (events.js:412:35)
    at endReadableNT (internal/streams/readable.js:1317:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on Connection instance at:
    at Connection._handleProtocolError (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:423:8)   
    at Protocol.emit (events.js:400:28)
    at Protocol._delegateError (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\protocol\Protocol.js:398:10)   
    at Protocol.end (C:\Users\user\OneDrive\Documents\websiteserver\node_modules\mysql\lib\protocol\Protocol.js:116:8)
    at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:94:28)
    [... lines matching original stack trace ...]
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  fatal: true,
  code: 'PROTOCOL_CONNECTION_LOST'
}
[nodemon] app crashed - waiting for file changes before starting...

所以除非我重新啟動服務器，否則我無法提交另一個表單。有誰知道如何解決它？

我的客戶端代碼：

import React, {useState} from 'react'
import { 
    FormWrap,
    Container, 
    Icon, 
    FormContent, 
    Form,
    FormH1,
    FormLabel, 
    FormInput,
    Text, 
    FormButton, 
    TextLeft,
    Heading,
    Subtitle,
    TextWrapper,
    LogoPage} 
from './SignInElements'
import Axios from 'axios'




const SignIn = ({}) => {
    const[name, setname] = useState("")
    const[cpf, setcpf] = useState("")
    const[tel, settel] = useState("")
    const[email, setemail] = useState("")

    const register = () => {
        Axios.post('http://localhost:3001/register/',  {
            name: name,
            cpf: cpf,
            tel: tel,
            email: email,
        }).then((response) => {console.log(response)});
    };
    

    return (
        <>
            <Container>
                <FormWrap>
                    <FormContent>
                        <TextLeft  action="#">
                            <Icon to="/"> <LogoPage src={require('../../images/Brand.svg').default} /> </Icon>
                            <TextWrapper>
                                <Heading>Test</Heading>
                                <Subtitle>Test</Subtitle>
                            </TextWrapper>
                        </TextLeft>
                        <Form action="#">
                            <FormLabel htmlFor="for">name</FormLabel>
                            <FormInput placeholder="Nome Sobrenome" type="text" required onChange={(e) => setname(e.target.value) }/>
                            <FormLabel htmlFor="for">cpf</FormLabel>
                            <FormInput placeholder="000.000.000-00" type="number" required  onChange={(e) => setcpf(e.target.value) }/>
                            <FormLabel htmlFor="for">tel</FormLabel>
                            <FormInput placeholder="(DDD) 90000-0000" type="text" required onChange={(e) => settel(e.target.value) } />
                            <FormLabel htmlFor="for">email</FormLabel>
                            <FormInput placeholder="[email protected]" type="email" required onChange={(e) => setemail(e.target.value) } />
                            <FormButton type="submit" onClick={register}>Register</FormButton>
                        </Form>
                    </FormContent>
                </FormWrap>
            </Container>
        </>
    )
}

export default SignIn

我的服務器端代碼：

const express = require("express");
const mysql = require("mysql");

const app = express();
const cors = require("cors");

app.use(express.json());

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

const db = mysql.createConnection({
    user: "--",
    host: "--",
    password: "--",
    database: "--"

});

app.post('/register', (req, res) => {
    const name = req.body.name;
    const cpf = req.body.cpf;
    const tel = req.body.tel;
    const email = req.body.email;
    db.query("INSERT INTO table (name, cpf, tel, email) VALUES (?,?,?,?)", 
    [name,cpf,tel,email],
    (err,result)=> {console.log(err);
    }
    )
});



app.listen(3001, () => {
    console.log("running on port 3001")
});

uj5u.com熱心網友回復：

嘗試強制 mysql 保持連接處于活動狀態。這段代碼應該可以

setInterval(function () {
  db.query('SELECT 1');
  }, 5000);

標籤：节点.js 反应 公理 节点监视器

上一篇：反應useContextsetState不是函式

下一篇：從函式打字稿回傳字串