componentDidMount неожиданно вызывается после перехода от реагирующей на загрузку к реагирующей. - PullRequest
Новая
       11

componentDidMount неожиданно вызывается после перехода от реагирующей на загрузку к реагирующей.

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

В моем проекте я использовал надежную загрузку для разделения кода и отложенной загрузки вместе с реагирующим маршрутизатором. Что-то вроде: 

<Route component={component} />

с 

Component = Loadable({
    loader: () => import(/* webpackChunkName: "Analyze" */ "./components/Analyze"),
})

Компонент анализа реализует componentDidMount и использует history.push маршрутизатора при изменении состояния. Когда новый URL выдвигается с некоторым измененным параметром, но все еще приводит к тому же компоненту «Анализ», вызывается только componentDidUpdate. Я обновил этот код, чтобы использовать React.lazy: 

<Route component={(_props: any) =>
          <LazyComponentWrapper>
              <Component {..._props} />
          </LazyComponentWrapper>
        } />

с 

Component = React.lazy(() => import(/* webpackChunkName: "Analyze" */ "./components/Analyze")),

и 

function LazyComponentWrapper({ children }) {
  return (
    <Suspense fallback={<div>{LOADING}</div>}>
        {children}
    </Suspense>
  );

, но теперь componentDidMound неожиданно вызывается каждый раз. Мне не ясно, связано ли это с React.lazy или с реагирующим маршрутизатором. Любая подсказка?

1 Ответ

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

Согласно документам может быть, лучше переместить Suspense из компонента Route, попробуйте это: 

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const Component = React.lazy(() => import(/* webpackChunkName: "Analyze" */ "./components/Analyze"))

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/analyze" component={Component}/>
      </Switch>
    </Suspense>
  </Router>
);
...