多次调用ComponentDidMount

Z时代
2024-01-10
分类：问答

我建立了一个HOC，可在我的应用中的受保护路线上使用。它接收应该在路径上呈现的组件，检查用户是否已通过身份验证，然后呈现该组件是否经过身份验证。它可以工作，但是会导致该组件多次挂载/卸载（与调用app.js文件中的render函数的次数相同）。

来自我的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));
}