C# MVC集成React用外部babel时componentDidMount触发两次如何解决

核心原因定位与对应修复方案 #

1. React StrictMode 开发环境特性触发（最高概率） #

React 16及以上版本的React.StrictMode严格模式，在开发环境下会故意重复调用类组件的constructor、render、componentDidMount等生命周期函数，用于检测代码中潜在的副作用问题，该行为在生产环境不会生效。
你的代码中CarContainer组件的render返回内容被React.StrictMode直接包裹，属于典型的触发场景：

// 原代码存在StrictMode包裹
render() {
    return (
        <React.StrictMode>Hello</React.StrictMode>
    );
}

修复方法

• 若无需严格模式的检测能力，直接移除React.StrictMode包裹即可：

render() {
    return <>Hello</>;
}

• 若需要保留严格模式，可忽略开发环境的双触发行为，项目上线生产环境后问题会自动消失。

2. JSX文件被重复加载编译 #

你使用的是浏览器端实时编译的babel-standalone方案，若MVC布局嵌套逻辑异常，可能导致CarContainer.jsx被重复加载、编译、执行，触发两次组件初始化。

修复方法

在CarContainer.jsx文件最顶部添加日志：

console.log('CarContainer JSX 加载')
var completeRecordCount = 0;
// 后续原有代码

刷新页面后若日志打印2次，说明JSX被重复加载，检查MVC的_ListLayoutV2.cshtml布局页，确认sectionMain区域没有被重复渲染，也没有在其他位置二次引入CarContainer.jsx文件。

3. 组件被重复挂载 #

若存在其他脚本重复调用ReactDOM.render挂载CarContainer到#main节点，或者#main节点被DOM操作删除后重建，也会触发两次componentDidMount。

修复方法

在CarContainer组件中添加卸载生命周期日志：

componentWillUnmount() {
    console.log('CarContainer 卸载')
}

刷新页面后如果出现「componentDidMount → CarContainer 卸载 → componentDidMount」的日志顺序，说明存在重复挂载逻辑，排查所有全局脚本，删除重复的ReactDOM.render(<CarContainer />, containerElement)调用即可。

内容的提问来源于stack exchange，提问作者Sanman Chavan