Question

我决定使用异步路由器加载，并像这样创建了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从头开始调用组件-构造函数，渲染，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-“主要组件”调用“ render”方法，2-CombineRoutes返回UserProfileRoute，3-UserProfileRoute再次通过异步HOC加载组件，4-“用户容器”再次调用“ constructor（）”。也许HOC再次加载了我的组件？那就是为什么我的组件再次调用'constructor（）'的原因？

有人有同样的问题吗？

Answer 1

您不能在UserProfileRoute功能组件中调用asyncComponent，因为在每个渲染器上，它将一次又一次地调用asyncComponent。这实际上是您遇到问题的原因。您应该在UserProfileRoute外部提取asyncComponent调用，并将其分配给常量。

异步反应路由和无限循环

1 个答案: