Question

版本

webpack 4.1.1，反应16.3.1，apollo-boost 0.1.4（apollo-client 2.2.8）

请参阅下面的代码。基本上我发现的是每当我尝试在render函数中加载我的组件时，都会永远调用componentDidMount。删除对.default的引用只是渲染null可以解决问题，将引用移动到.default则不会。如何在此处使用动态导入并正确反应？请注意，在我使用react-apollo查询组件来管理状态之前，这工作正常。我需要做些什么才能将这三种工具结合起来实际合作？在同一问题上经过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动态导入导致反应重新安装

1 个答案: