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

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

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

我的理论是我的应用程序的行为正在触发一个外部侦听器/案例，这导致了完整的浏览器刷新。

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

任何关于改进我的调查或潜在解决方案的想法都会有所帮助。

4

1 回答 1

0

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

我遇到了这个确切的问题，我花了 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"
    }
  }]
}

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

于 2018-10-15T00:56:27.960 回答