Я решил использовать загрузку асинхронного маршрутизатора и создал HOC следующим образом:
const asyncComponent = (importComponent) => {
return class extends React.Component {
state = {
component: null
}
componentDidMount() {
importComponent()
.then(cmp => {
this.setState({component: cmp.default});
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props}/> : null;
}
}
};
export default asyncComponent;
Я использовал этот HOC в своем маршрутизаторе для профиля:
import asyncComponent from '../../../../hoc/async.routes.hoc.jsx'
export const UserProfileRoute = () => (
<div>
<Route path="/" name="applicantProfile" exact component={
asyncComponent(() => (import('../containers/profile.ctrl.jsx')))
} />
</div>
)
На компоненте, который я вызываюдействие в методе componentDidMount и после обновления состояния действия, метод componentDidMount вызывается снова, и я получаю бесконечный цикл.Также HOC вызывает все методы и снова вызывает Router, Router вызывает компонент с нуля - конструктор, render, componentDidMount.
Мой компонент после состояния обновления вызывает все методы внутри, как если бы это был первый рендер компонента.
Первый главный компонент:
@withRouter
@connect(mapStateToProps)
@i18n
@oauth
export default class Main extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div className="fl fl--dir-col fl--justify-b h-100">
<Header />
<CombineRoutes {...this.props} />
<Footer />
</div>
)
}
}
Основной компонент вызывает это:
export const CombineRoutes = (props) => (
<Switch>
<IncludedProfile {...props} />
</Switch>
)
Когда я изменяю состояние в пользовательском контейнере.1 - «Основной компонент» вызывает метод «рендеринга», 2 - CombineRoutes возвращает UserProfileRoute, 3 - UserProfileRoute снова загружает компонент через асинхронный HOC, 4 - «Контейнер пользователя» снова вызывает конструктор ().Может быть, HOC снова загрузит мой компонент?вот почему мой компонент снова вызывает конструктор ()?
У кого-то такая же проблема?