react中调用了componentDidMount生命周期方法两次答案

【问题标题】：componentDidMount life cycle method is called twice in reactreact中调用了componentDidMount生命周期方法两次
【发布时间】：2020-09-19 00:31:35
【问题描述】：

在我的 react 应用程序中，初始 API 调用在应用程序加载时进行了两次。我查看了 Chrome->inpsect 中的“网络”选项卡，“启动器”调用堆栈显示第一个调用来自 VM123000_bundle.js，而第二个调用只是来自实际的 bundle.js。除了升级了 Webpack (1.x -> 4.x) 和 React (15.x->16.x) 模块之外，在 prod 环境中工作的代码相同。有人可以指出VM123000_bundle.js 是什么以及为什么在主页加载时第一次调用它？

AppHome.js

componentDidMount () {
const appdata = this.props.ebayHome.toJS();
this.props.getAccounts("/EName/Account/, ActionTypes.ACCOUNT_DATA, JSON.stringify(accountMutualParams));
}

【问题讨论】：

在我看来，您的 webpack 配置可能有问题，并且以某种方式导入了两次应用程序。
谢谢@YalungTang，我会查的。
能否请您与我们分享整个 index.js 和 app.js 代码？
@HosnyBen，谢谢你的回复，很抱歉，由于公司政策，我无法分享它们，我知道不看代码很难指出。但问题是相同的代码在 PROD 中工作，没有重复调用，webpack 配置为 webpack4 完全重写。所以从这个角度思考。如果 Webpack 有任何已知问题导致此问题，请告诉我
我发现了问题，但不确定如果我在 home.html 页面中删除对 bundle.js 的引用，它是如何工作的，它可以工作，但页面不是从 bundle.js 提供的，所以不确定如何强制应用使用 bundle.js 中的页面

标签： javascript reactjs webpack

【解决方案1】：

这是 HtmlWebpackPlugin 的一个问题，它实际上将所有生成的包引用注入到现有的 HTML 页面中。有两种方法可以修复它。

在 webpack 配置中跳过注入
删除 HTML 页面中的捆绑包引用

【讨论】：