create-react-appProject在本地服务器生成文件时重新加载

Question

我正在构建一个开发工具，该工具允许用户从数据库查询给定时间窗口的设备数据，使用matplotlib生成数据图，将其保存到本地文件，并在网页上呈现。我已经为前端和Flask后端使用了create-react应用程序，这两个应用程序都在本地运行。问题是，当后端为绘图创建新目录时，react应用程序甚至在绘图生成之前就重新加载了，我在浏览器上收到一个"请求中止"错误。最奇怪的是，它不会在第一次请求时中断，并且正确地嵌入了所有情节。它只在后续请求时中断。我该如何解决这个问题？

以下是创建目录并保存文件的绘图仪代码：

fig_latest = plt.figure()
ax_latest = fig_latest.add_subplot(projection='3d')
plot_latest = ax_latest.bar3d(x, y, bottom, width, depth, latest_height, color='c')
fig_ani= plt.figure()
ax_ani = fig_ani.add_subplot(projection='3d')
def update_plot(frame, data):
        for bar in ax_ani.collections:
            ax_ani.collections.pop()
        frame_data = data[frame].to_numpy().astype(np.int16)
        height = frame_data.ravel()
        print(f'Frame: {int(frame)}')
        timestamp = time.strftime('%d %b %Y, %I:%M:%S %p', time.localtime(int(frame/1000)))
        for text in ax_ani.texts:
            text.set_visible(False)
        ax_ani.text2D(0.6, 1, f'Time: {timestamp}', transform=ax_ani.transAxes)
        return [ax_ani.bar3d(x, y, bottom, width, depth, height, color='c')]
bar_ani = animation.FuncAnimation(fig_ani, update_plot, frames=row_data.keys(), fargs=(row_data,), interval=750)
os.mkdir(path_name)
mpeg_writer = animation.FFMpegWriter(fps=2)
bar_ani.save(os.path.join(path_name, 'animation.mp4'), writer=mpeg_writer)
fig_latest.savefig(os.path.join(path_name, 'latest.png'))

应用程序在调用os.makedir后立即重新加载。

烧瓶后端：

from flask import Flask, request
from flask_cors import CORS, cross_origin
import plotter
import json
app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "http://localhost:3001"}})
@app.route('/plots', methods=['POST', 'OPTIONS'])
@cross_origin(origin='localhost')
def respond():
    data = request.json
    device_id = data['deviceId']
    start_time = data['startTime']
    end_time = data['endTime']
    print(f'{device_id}, {start_time}, {end_time}')
    return plotter.build_plots(device_id, start_time, end_time)

前端POST请求的代码：

const baseUrl = 'http://localhost:3001/plots'
const requestPlot = (deviceId, startTime, endTime) => {
  const plotRequest = {
    deviceId,
    startTime,
    endTime
  }
  console.log(plotRequest)
  return axios
         .post(baseUrl, plotRequest)
         .then(response => {
           console.log('RECEIVED RESPONSE!')
           return response.data
         })
}

Answer 1

似乎您正在"开发"；模式通过"；npm启动"；命令由于webpack正在监视所有文件的更改，并在编辑或创建的每个文件上重新加载前端。解决问题的一种方法是运行"；npm构建"；命令并设置nginx或在"中使用python的SimpleHTTP服务器运行您的前端；dist"；目录