Webpack 动态导入导致反应重新挂载

Question

版本

webpack 4.1.1, react 16.3.1, apollo-boost 0.1.4 (apollo-client 2.2.8)

请参阅下面的代码。基本上我发现的是，每当我尝试在渲染函数中加载我的组件时，componentDidMount 就会被永远调用。删除对 .default 的引用并仅呈现 null 可以解决问题，将对 .default 的引用移动到渲染方法则不会。我怎样才能在正确反应的同时使用这里的动态导入？请注意，在我使用用于管理状态的 react-apollo 查询组件之前，它工作正常。我需要做什么来结合这 3 个工具来实际合作？在同一问题上 4-5 小时后，我没有取得任何进展。

const RouterContainer = () => (
  <Query
    query={gql`
      {
        currentRoute @client
        routeArgs @client
      }
    `}
  >{({ data }) => <Router {...data} />}</Query>
);

class Router extends React.Component {
  state = {
    component: null,
    page: '',
  }
  fetchComponent = () => {
    import('./MyComponent).then(Component => {
      this.setState({ Component: Component.default });
    });
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.page !== nextProps.currentRoute) {
      return { page: nextProps.currentRoute };
    }
    return null;
  }
  componentDidMount() {
    // Being run infinitely. Why???
    // this.fetchComponent();
  }
  render() {
    return this.state.Component ? <this.state.Component /> : null;
  }
}

Answer 1

我本来打算几个月前提出来的，但显然我忘记了。问题最终与此无关，我所做的不完整重构导致无限反应树（子渲染父）

Webpack 动态导入导致反应重新挂载

Webpack dynamic import causing react remount

reactjs

webpack

react-apollo