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

Question

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

在对我的 API 执行多张图片（在本例中为 6）的 fetch 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 app.js --config nodemon.json）添加了一个nodemon.json 配置文件：

{   
    "ignore": ["uploads"] 
} 

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

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

如果您没有使用上述任何一个软件包，那么我建议您考虑重新配置您的存储方式和serving images to the application（作为最后手段）的可能性。