Реакция максимальной глубины превышена для компонентов более высокого порядка - PullRequest
0 голосов
/ 28 октября 2018

Я пытаюсь вычислить объект крошки HOC withBreadcrumbs на основе реквизита, полученного 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);
...