即使没有循环Javascript，也会调用非停止查询

Question

由于某些原因，我既可以成功地将数据发送到localhost:8000/data，也可以成功地从前端检索数据，但当我刷新前端时，它会无休止地调用查询。如果我只是运行服务器，它会按照应该的方式连接到数据库1次。

这是server.js

const port = 8000
const express = require('express')
const cors = require('cors')
require('dotenv').config()
const axios = require('axios')
const app = express()
app.use(cors())

const mysql = require('mysql');
var connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "",
port: "3306"
});

connection.connect((err) =>{
if(err){
throw err
}else{
connection.query('SELECT * FROM sg_vod_database.vod_data', (err, rows) =>{
if(err){
throw err;
}else{
console.log(rows)
}
})
}
})
})
app.get('/data', (req, res) =>{
const databaseData = {
method: "GET",
url: "http://localhost:8000/data"
}
connection.query('SELECT * FROM database name', (err, rows) =>{
if(err){
throw err;
}else{
res.json(rows)
}
})
axios.request(databaseData).then((response) => {
console.log(response.data) 
}).catch((error)=>{
console.error(error)
})
}) 
app.listen(port, ()=> console.log(`Server running on port ${port}`))

这是我使用的反应成分的相关部分

function VODDisplay(props) {
var dataArray = []

const databaseData = {
method: 'GET',
url: 'http://localhost:8000/data'
}
axios.request(databaseData).then((response) => {
console.log(response.data)
dataArray = response.data    
}).catch((error)=>{
console.error(error)
})

我只是把代码放错了地方吗？我不确定app.get中应该有多少，但我想知道前端是否只是不断地调用axios.request。我确实试着用useEffect让它只运行一次，但这并没有阻止它

Answer 1

正如我所看到的，每当渲染组件时，您都会发出请求。对于react，您必须用空的deps数组将您的请求封装在useEffect挂钩中，并将useState用于dataArray，这将阻止您的组件在每次重新发送后运行请求

import {useEffect, useState} from 'react';
const [dataArray, setDataArray] = useState([]);
useEffect(() => {
const databaseData = {
method: 'GET',
url: 'http://localhost:8000/data'
}
axios.request(databaseData).then((response) => {
console.log(response.data)

setDataArray(response.data); 
}).catch((error)=>{
console.error(error)
})
}, [])