Javascript 反应&；React路由器异步组件多次安装（多次调用componentDidMount）

我正在使用Webpack3.7.1和React 15.6.1，并动态加载不同的组件

我所做的

• 使用AsyncComponent和import（）异步生成块并加载组件
• 正确配置webpack.config文件，以便创建块（代码拆分）

问题

• 组件被重新招标（安装）多次。如果我在任何组件的componentDidMount（）中记录某个内容，它会在我的控制台中出现2次或更多次！以前没有这样做：当我只是正常导入组件时

更改为异步组件之前的行为

• 组件加载正确，只安装了一次

我的Webpack.config文件 我的AppContainer.js文件

/**
*网站的一般容器
*/
类AppContainer扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
console.log（“安装应用程序容器”）
}
render（）{
const HomePage=AsyncComponent（（）=>
导入（/*webpackChunkName:“主页”*/“./组件/主页/主页”）
);
返回(
);
}
}

组件本身更复杂（进行API调用，并且有更多的路由），但出于堆栈目的，在这里对其进行了简化；）

我的AsyncComponent.js文件

import React，{Component}来自“React”；
导出默认函数asyncComponent（导入组件）{
类AsyncComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
组件：空
};
}
异步组件didmount（）{
const{default:component}=wait importComponent（）；
这是我的国家({
组件：组件
});
}
render（）{
const C=this.state.component；
返回C？：空；
}
}
返回异步组件；
}

我猜问题来自AsyncComponents/chunks生成，因为在使用AsyncComponents并将代码拆分成块之前，我没有遇到过这个问题。。。但我不知道它到底是从哪里来的

---

非常感谢您的帮助尝试将

主页

的声明移动到

渲染

之外<代码>渲染可以被调用任意次数，返回的每个组件的反应看起来都不一样

/**
* General container of the website
*/
const HomePage = AsyncComponent(() =>
  import(/* webpackChunkName:"HomePage"  */ "../components/homepage/homepage")
);

class AppContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("MOUNTING APP CONTAINER")
  }

  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
        </Switch>
      </div>
    );
  }
}

/**
*网站的一般容器
*/
const HomePage=AsyncComponent（（）=>
导入（/*webpackChunkName:“主页”*/“./组件/主页/主页”）
);
类AppContainer扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
console.log（“安装应用程序容器”）
}
render（）{
返回(
);
}
}

---

一般来说，我建议不要在React组件内执行异步工作。您的渲染层应该是同步的，以便您的UI有一个可预测的生命周期。

当然！！我怎么没想到：哦，谢谢你！！

 /**
 * General container of the website
 */
class AppContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("MOUNTING APP CONTAINER")
  }



  render() {
    const HomePage = AsyncComponent(() =>
      import(/* webpackChunkName:"HomePage"  */ "../components/homepage/homepage")
    );


    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
        </Switch>
      </div>
    );
  }
}

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
    class AsyncComponent extends Component {
      constructor(props) {
        super(props);

        this.state = {
          component: null
        };
      }

      async componentDidMount() {
        const { default: component } = await importComponent();

        this.setState({
          component: component
        });
      }

      render() {
        const C = this.state.component;

        return C ? <C {...this.props} /> : null;
      }
    }

    return AsyncComponent;
  }

/**
* General container of the website
*/
const HomePage = AsyncComponent(() =>
  import(/* webpackChunkName:"HomePage"  */ "../components/homepage/homepage")
);

class AppContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("MOUNTING APP CONTAINER")
  }

  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
        </Switch>
      </div>
    );
  }
}