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);
};

它位于库node_modules/react-dev-tools/node_modules/socketjs-client/lib/transport/websocket.js的文件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"
    }
  }]
}

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