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

Question

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

javascriptreactjswebsocketreact-devtools

6

我有一个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中，认为删除此模块可以解决问题，但是这也会在我的生产环境中出现，并且我感到删除此模块可能会破坏构建。

请提供任何关于更好的调查方法或潜在解决方案的想法。

- Vince

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Carlotta · 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"
    }
  }]
}

如果您没有使用上述任何软件包，那么我建议您考虑重新配置存储和为应用提供图片的方式（作为最后的选择）。