Я встроил функцию тайм-аута в свое приложение реакции. Я передаю маршруты из моего файла индекса. 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);