反应超过最大深度的高阶组件

Question

我正在尝试根据withBreadcrumbs收到的道具计算HOC withRouter的面包屑对象。下面的代码可以正常工作，因为我没有进行任何计算。

import React from 'react';
import { compose } from 'recompose';
import { withRouter } from 'react-router';
import { withBreadcrumbs } from 'containers/Breadcrumbs';    

const UserPage = () => <div>User Page</div>;

export default compose(
  withRouter,
  withBreadcrumbs({
    title: `Users`,
    path: ROUTE_USERS,
  }),
)(UserPage);

我尝试了以下代码来基于React Router 4 location.search param计算面包屑标题，但是它说，React超过了最大更新的深度。

import React from 'react';
import { compose } from 'recompose';
import { withRouter } from 'react-router';
import { withBreadcrumbs } from 'containers/Breadcrumbs';
const QueryString = require('query-string');

const UserPage = () => <div>User Page</div>;

const withRouteDependentBreadcrumb = WithRouterComponent => props => {
  const qs = QueryString.parse(props.location.search);
  const Enhanced = withBreadcrumbs({
    title: `${qs.locationName} - Users`,
    path: ROUTE_USERS,
  })(WithRouterComponent);
  return <Enhanced {...props} />;
};

export default compose(
  withRouter,
  withRouteDependentBreadcrumb,
)(UserPage);