Маршрутизатор Jhipster реагирует на рендеринг несколько раз - PullRequest
Новая
       25

Маршрутизатор Jhipster реагирует на рендеринг несколько раз

0 голосов
/ 24 марта 2020

Я использую Jhipster 6.7.0 с интерфейсом React. Сгенерированный код использует response-router-dom в версии 5.1.2 и создал следующие компоненты:

rout.tsx: 

const Routes = () => (
  <div className="view-routes">
    <Switch>
      <ErrorBoundaryRoute path="/login" component={Login} />
      <ErrorBoundaryRoute path="/logout" component={Logout} />
      ...
      <ErrorBoundaryRoute path="/" component={Entities} />
      <ErrorBoundaryRoute component={PageNotFound} />
    </Switch>
  </div>
);

Сама Enties имеет вложенные маршруты: 

const Routes = ({ match }) => (
  <div>
    <Switch>
      {/* prettier-ignore */}
      <ErrorBoundaryRoute path={`${match.url}a`} component={A} />
      <ErrorBoundaryRoute path={`${match.url}b`} component={B} />
      ...
      {/* jhipster-needle-add-route-path - JHipster will add routes here */}
    </Switch>
  </div>
);

И конкретный компонент сущности снова имеет под маршруты: index.tsx права B: 

const Routes = ({ match }) => (
  <>
    <Switch>
      ...
      <ErrorBoundaryRoute exact path={`${match.url}/explore`} component={BExplore} />
      <ErrorBoundaryRoute exact path={`${match.url}/:id`} component={BDetail} />
      ...
    </Switch>
  </>
);

Для полноты здесь приведен код сгенерированного ErrorBoundaryRoute

export const ErrorBoundaryRoute = ({ component: Component, ...rest }: RouteProps) => {
  const encloseInErrorBoundary = props => (
    <ErrorBoundary>
      <Component {...props} />
    </ErrorBoundary>
  );

  if (!Component) throw new Error(`A component needs to be specified for path ${(rest as any).path}`);

  return <Route {...rest} render={encloseInErrorBoundary} />;
};

Теперь к моей проблеме: при переходе на страницу сведений о сущностях BDetail's метод визуализации get вызывается 4 раз. Я новичок, чтобы реагировать и не понимаю почему. Из моего понимания, когда не передается функция в рендере рендеринга, например, render={() => someComponents} реагировать, следует признать, что функция не изменилась и не должен вызывать рендеринг для компонента. Вот что я думаю, ErrorBoundaryRoute делает. Так почему метод рендеринга get вызывается несколько раз?

Чтобы правильно отобразить мою детализированную сущность, мне нужно сравнить идентификатор проповеди совпадения с идентификатором текущей сущности, хранящейся в хранилище с избыточностью, например: 

export const BDetail= (props: IBDetailProps) => {
  useEffect(() => {
    props.getEntity(props.match.params.id);
  }, []);

  const { bEntity, hasBs, loading } = props;
  return (
    <>
      {bEntity && bEntity.name && bdEntity.id.toString() === props.match.params.id? (
  ...
  );
};

Но это не должно быть нормальным рабочим процессом, верно?

Кроме того, я не могу добавить прослушиватель изменения истории на props.history.listen, так как этот прослушиватель также вызывается несколько раз для одного изменения истории. Чтобы обойти это, мне нужно использовать хук useLocation из react-router-dom.

...