javascript - 几次尝试后，Axios 没有发出任何请求

Question

我正在使用 React 测试从本地客户端和本地服务器到 RDS 数据库的连接。在最初的几次尝试中，我的演示应用程序运行良好，但经过几次尝试后，我的代码似乎无法连接到数据库，也不想相互连接。谁能告诉我我的代码中可能遗漏了什么？

附言。我知道我的代码不干净。可能存在一些不必要的代码，但请忽略它们。

我一直在不断地测试，我发现无响应周期越来越短，我认为问题与缓存数据有关（如果这有意义的话——我完全是新来的反应！）。

客户

import React, {useState,useEffect} from 'react';
import './App.css';
import Axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

function App() {
  const [title, setTitle] = useState('');
  const [sAuthor, setAuthor] = useState('');
  const [dateTime, setDateTime] = useState('');
  const [desc, setDesc] = useState([]);

  const submitButton = () => {
    console.log("submit")
    Axios.post('http://localhost:3001/post', {
      time: dateTime, 
      author: sAuthor,
    })
    .then((response)=>{
      console.log("responsed");
    });
    
    Axios.get('http://localhost:3001/get').then((response)=>
    {
      console.log("got");
      setDesc([]);
      setDesc(response.data);
      enlist();
    });
  }

  const enlist = () => {
    console.log("enlist");
    console.log(desc)
    desc.map((val)=>{
      return <h2>"STOCK NAME:"</h2>
    })
  }

  useEffect(()=>
  {
    Axios.get('http://localhost:3001/get').then((response)=>
    {});
  },[])
  useEffect(()=>
  {
    console.log(desc);
  })
  return (
    <div className="App">
      <h1>CRUD APPLICATION</h1>
      <div className="form">
        <input type = "text" name = "AI_TITLE" onChange={(e)=>{
          setTitle(e.target.value)}}/>
        <h3>TITLE</h3>
        <input type = "text" name = "AI_AUTHOR" onChange = {(e)=>{
          setAuthor(e.target.value)}}/>
        <h3>STOCK NAME</h3>
        <DatePicker format={"yyyy-MM-DD"} selected={dateTime} onChange={(date) => setDateTime(date)} />
        <button className = "button" onClick={submitButton} >submit</button>
        {desc.map((val)=>{
          return (
            <h1>STOCK: {val.AI_STOCKCD}</h1>
          )
        })}
      </div>
    </div>
  );
}

export default App;

服务器

const express = require('express');//create express server 
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');

app.use(cors());
const db = mysql.createPool({
    host: 'somehost',
    user: 'someuser',
    password: 'somepassword',
    port: 0000,
    database: 'smms2'
})
app.use(express.json())

app.use(express.urlencoded({extended: true}));

var author = "";
var time = "";

// recieving request from client
app.post("/post",(req, res)=>{
    author = req.body.author;
    time = req.body.time;
    console.log(1)
    console.log(author)
    console.log(time)
})

// sending request to db
app.get("/get",(req, rows, fields)=>{
    const sqlSelect = "SELECT * FROM ai_board WHERE UPDATE_DT > '"+time+"' AND AI_AUTHOR = '" + author+ "';";
    db.query(sqlSelect, (err, result) =>{
       rows.send(result);
    });
})

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

包.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "devStart": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mariadb": "^2.5.3",
    "mysql": "^2.18.1",
    "nodemon": "^2.0.7"
  }
}

标签： javascriptnode.jsreactjsaxios