мой второй компонент высшего порядка не рендеринг - PullRequest
0 голосов
/ 18 февраля 2020

Я встроил функцию тайм-аута в свое приложение реакции. Я передаю маршруты из моего файла индекса. js и упаковываю их в HO C, первый маршрут работает, как и ожидалось, и функция idleTimeout работает, однако, второй MyProspect не рендерит, хотя я копирую его реквизиты. Кто-нибудь может понять, почему это может происходить?

Это мой AutoLogout. js код файла:

import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { Switch, Route} from 'react-router-dom'
import {IdleTimeOutModal} from "../IdleTimeOutModal";
import {MyDashboard, MyProspects} from "../index";
// import { useHistory } from "react-router-dom";
// import { userLogout } from "reducers/AuthReducer";

export default function HOC (WrappedComponent) {
 return class extends Component{
      constructor(props) {
          super(props);

          this.state = {
              timeout:      60000 * 5, //5 Minutest for now
              showModal:    false,
              userLoggedIn: false,
              isTimedOut:   false,
              remaining: null,
              elapse: null,
              isIdle: false,
              logout: false
          };

          this.onAction = this._onAction.bind(this);
          this.onActive = this._onActive.bind(this);
          this.onIdle = this._onIdle.bind(this);
          this._onActive = this._onActive.bind(this);
          // this.handleClose = this.handleClose.bind(this);
          // this.handleLogout = this.handleLogout.bind(this);
      }

      componentDidMount() {
          this.setState({
              remaining: this.idleTimer.getRemainingTime(),
              lastActive: this.idleTimer.getLastActiveTime(),
              elapsed: this.idleTimer.getElapsedTime()
          })


      }

     // handleClose() {
     //     this.setState({showModal: false})
     // }
     //
     // handleLogout() {
     //     this.setState({showModal: false});
     //     this.props.userHistory.push('/')
     // }



    render() {
        //const { match } = this.props;
        return (
            <div>
                <IdleTimer
                    ref={ref => {this.idleTimer = ref}}
                    element={document}
                    onActive={this.onActive}
                    onIdle={this.onIdle}
                    onAction={this.onAction}
                    debounce={250}
                    timeout={this.state.timeout} />

                    <WrappedComponent>
                            <Route
                                path={"/sales-analysis/dashboard"}
                                render={props => <MyDashboard {...props} />} />
                            <Route
                                path={"/prospects"}
                                render={props => <MyProspects {...props} />} />
                        <IdleTimeOutModal
                            showModal={this.state.showModal}
                            handleClose={this.handleClose}
                            handleLogout={this.handleLogout}
                        />
                    </WrappedComponent>
            </div>
        )
    }  _onAction(e) {
         console.log('user did something', e);
     }

     _onActive(e) {
         console.log('user is active', e);
         console.log('time remaining', this.idleTimer.getRemainingTime());
     }

     _onIdle(e) {
        const idle = this.setState({isIdle: true});
         console.log('elapseTime', this.idleTimer.getElapsedTime());
         console.log('userIsIdle', idle);
         console.log('userIsIdle', idle);
         // console.log('last active', this.idleTimer.getLastActiveTime())
        window.location = '/logout';
     }

 }
}

Мои компоненты обернуты таким образом в мой индекс. js файл в мой провайдерский магазин.

 <DefaultLayout
                path="/sales-analysis/dashboard"
                component={HOC(DashboardContainer)}
              />
<DefaultLayout path="/prospects"
                component={HOC(ProspectsContainer)} />

и экспортируется вот так

export const MyDashboard = HOC(DashboardContainer);
export const MyProspects = HOC(ProspectsContainer);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...