Question

我有一个React Web应用程序，可以上传图片。

在对我的API执行多张图片的POST请求（本例中为6张）后，浏览器会刷新自身并重新加载当前页面。值得注意的是，此应用程序允许裁剪图像，因此用户上传的每个图像都有第二个图像（裁剪）要上传。因此，以上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"
    }
  }]
}

如果您不使用上述两个软件包，那么建议您考虑重新配置存储方式和serving images to the application的可能性（作为最后的选择）。

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

1 个答案: