reactjs - ComponentDidMount 被调用多次

Question

我构建了一个 HOC 以在我的应用程序中的 protected 路由上使用。它接收应在路由上呈现的组件，检查用户是否经过身份验证，然后呈现该组件(如果是)。它可以工作，但它会导致组件多次挂载/卸载(与调用我的 app.js 文件中的渲染函数的次数一样多)。

来 self 的 app.js 的路由

<Switch>
    <Route path='/groups/show/:id'
           component={ RequireAuth(Group) } />

    <Route path='/groups/create'
           component={ RequireAuth(CreateGroup) } />

    <Route path='/groups'
           component={ RequireAuth(GroupsMenu) } />

    <Route path='/tutorials/:id' component={ Tutorial } />
    <Route path='/tutorials'     component={ TutorialMenu } />
    <Route path='/ranked'        component={ RankedPlay } />
    <Route path='/casual'        component={ CasualPlay } />
    <Route path='/offline'       component={ OfflinePlay } />
    <Route path='/signup'        component={ Signup } />
    <Route path='/'              component={ Menu } />
</Switch>

require_auth.js

import React, { Component } from 'react';
import { connect }          from 'react-redux';
import { withRouter }       from 'react-router-dom';
import { store }            from '../../index';
import { AUTH_ERROR }       from '../../actions';
import PropTypes            from 'prop-types';

import Display from './display';

export default function(ComposedComponent) {
    class Authentication extends Component {
        static propTypes = {
            history: PropTypes.object.isRequired
        };

        componentWillMount() {
            const { history } = this.props;
            const error = 'You must be logged in to do this.  Please login';

            if (!this.props.authenticated) {
                store.dispatch({ type: AUTH_ERROR, payload: error });
                history.push('/');
            }
        }

        componentWillUpdate(nextProps) {
            const { history } = this.props;
            const error = 'You must be logged in to do this.  Please login';

            if (!nextProps.authenticated) {
                store.dispatch({ type: AUTH_ERROR, payload: error });
                history.push('/');
            }
        }

        render() {
            return (
                <Display if={ this.props.authenticated } >
                    <ComposedComponent { ...this.props } />
                </Display>
            );
        }
    }

    function mapStateToProps(state) {
        return {
            authenticated: state.auth.authenticated
        };
    }

    return withRouter(connect(mapStateToProps)(Authentication));
}

如果从任何路由中删除 RequireAuth()，则当您点击该路由时，该组件只会安装一次。但是添加它会导致每次 app.js render() 触发时都会安装该组件。有没有办法可以设置此组件，以便组件仅安装一次？

Answer 1

通过在渲染中调用 RequireAuth(Component)，您可以在每次渲染调用中使用 HOC 来装饰 Component，从而使每个渲染返回一个new 组件化每个渲染。

在导出之前，您应该使用 RequireAuth 修饰 Group、CreateGroup 和 GroupsMenu。就像使用 react-redux 的 connect 一样。