websocket.js导致意外刷新React应用程序

Question

我有一个允许图像上传的React Web应用程序.

在对我的API执行多个图像(在本例中为6)的提取POST请求后,浏览器会自行刷新并重新加载当前页面.值得注意的是,此应用程序允许裁剪图像,因此用户上传的每个图像都有第二张图像(裁剪)要上传.因此,上述6个图像导致12个POST请求.

刷新行为不稳定且难以重现.我在函数中插入了断点,这种行为发生了.使用chrome调试器工具,我已经逐步完成了流程,发现在此调用之后进行了刷新.

this.ws.onmessage = function(e) {
    debug('message event', e.data);
    self.emit('message', e.data);
};

它位于websocket.js库中的文件内node_modules/react-dev-tools/node_modules/socketjs-client/lib/transport/websocket.js

我已将其缩小到此文件,并排除了我的项目代码库中的任何问题.

我的理论是我的应用程序的行为是触发一个外部监听器/案例,导致完整的浏览器刷新.

我看到有问题的文件在里面,react-dev-tools并认为删除此模块可以解决问题,但是,这也发生在我的生产环境中,因此我觉得删除它可能会破坏构建.

任何关于更好地调查或潜在解决方案的想法都会有所帮助.

Answer 1

我不确定你如何运行你的环境，但这也许会有所帮助......

我遇到了这个确切的问题，我花了 3 天（太长）才将其范围缩小到nodemon（开发中）和pm2（生产中）。我不确定您如何提供应用程序/图像，但对我来说，每当添加新文件时，服务就会间歇性地重新启动（有时会上传，有时会被切断）。

为了进行开发，我nodemon.json在应用程序根目录 ( nodemon app.js --config nodemon.json) 添加了一个配置文件：

{   
    "ignore": ["uploads"] 
} 

对于生产，我prod.json在应用程序根目录创建了一个并运行pm2 start prod.json：

{
  "apps" : [{
    "name"        : "app-name",
    "ignore_watch" : ["uploads"],
    "script"      : "./app.js",
    "env": {
      "NODE_ENV": "production"
    }
  }]
}

如果您没有使用上述两个软件包，那么我建议您考虑重新配置如何存储图像并将图像提供给应用程序的可能性（作为最后的手段）。