React 无法对未定义的属性路径做出反应

Question

我正在构建一个高阶组件以在我的 React 应用程序中创建一个空闲超时功能。我有自动注销组件，我正在将其包含在我的 index.js 文件中。但是，运行我遇到了无法读取路径的问题。我究竟做错了什么？

这是我的 HOC 组件：

import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router-dom'
import DefaultLayout from "../containers/DefaultLayout";


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

          this.state = {
              timeout:      1000*5,
              showModal:    false,
              userLoggedIn: false,
              isTimedOut:   false
          };

          this.idleTimer = null;
          this.onAction = this._onAction.bind(this);
          this.onActive = this._onActive.bind(this);
          this.onIdle = this._onIdle.bind(this);

      }

      _onAction(e){
          console.log('User did something', e);
          this.setState({isTimedOut: false})
      }

      _onActive(e){
          console.log('user is active', e);
          this.setState({isTimedOut: false})
      }

      _onIdle(e){
          console.log('user is idle', e);
          const isTimedOut = this.state.isTimedOut;
          if (isTimedOut){
              this.props.history.push('/')
          }else {
              this.setState({showModal: true});
              this.idleTimer.reset();
              this.setState({isTimedOut: true})
          }
      }

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

                    <div className="">
                        <Switch>
                            <Route
                               exact path={`${match.path}/sales-analysis/dashboard`}
                                render={(props) => <DefaultLayout {...props} /> }/>
                            />
                        </Switch>
                    </div>
            </WrappedComponent>
        )
    }

 }
}
    HOC.propTypes = {
        match: PropTypes.any.isRequired,
        history: PropTypes.func.isRequired
    };

这是 index.js 文件，其中包含我要监视的路由

class AppEntry extends React.Component {
  componentDidMount() {
    window.addEventListener("appNotifyUpdate", this.appNotifyUpdate);
    window.addEventListener("appUpdate", this.appUpdate);
    window.addEventListener("offline", function(e) {
      store.dispatch(setOffline(true));
    });
    window.addEventListener("online", function(e) {
      store.dispatch(setOffline(false));
    });
  }

  componentWillUnmount() {
    window.removeEventListener("appNotifyUpdate", this.appNotifyUpdate);
    window.removeEventListener("appUpdate", this.appUpdate);
    window.removeEventListener("offline", function(e) {
      store.dispatch(setOffline(true));
    });
    window.removeEventListener("online", function(e) {
      store.dispatch(setOffline(false));
    });
  }

  appNotifyUpdate = e => {
    store.dispatch(setAppUpdateBar(true));
  };

  appUpdate = e => {
    store.dispatch(setAppUpdateBar(false));
  };

  render() {
    return (
      <Provider store={this.props.store}>
        <PersistGate loading={<div />} persistor={this.props.persistor}>
          <BrowserRouter>
            <div id="browserRouter">
              <Route exact path="/" component={LoginContainer} key="login" />
              <Route
                path="/change-password"
                component={LoginContainer}
                key="change-password"
              />
              <Route path="/logout" component={Logout} key="logout" />
              <DefaultLayout
                path="/sales-analysis/dashboard"
                component={HOC(DashboardContainer)}
              />
              <DefaultLayout
                path="/sales-analysis/active-clients"
                component={ActiveClientsContainer}
              />
              <DefaultLayout
                path="/sales-analysis/activity-reports"
                component={ActivityReportsContainer}
              />
              <DefaultLayout
                path="/sales-analysis/segments"
                component={SegmentsContainer}
              />
              <DefaultLayout path="/prospects" component={ProspectsContainer} />
              <DefaultLayout
                path="/preferences/general"
                component={PreferenceGeneral}
              />
              <DefaultLayout
                path="/preferences/account-manager"
                component={PreferenceAccountManager}
              />
              <DefaultLayout
                path="/preferences/flex-fields"
                component={PreferenceFlexFields}
              />
              <DefaultLayout
                path="/preferences/oem-manager"
                component={PreferenceOEMManager}
              />
              <DefaultLayout
                path="/preferences/users"
                component={PreferenceUsers}
              />
              <DefaultLayout
                path="/preferences/group-users"
                component={PreferenceGroupUsers}
              />
            </div>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}
AppEntry = HOC(AppEntry);

我得到的确切错误是这个

TypeError: Cannot read property 'path' of undefined
render
./src/components/AutoLogout.js:65:52
  62 | <div className="">
  63 |     <Switch>
  64 |         <Route
> 65 |            exact path={`${match.path}/sales-analysis/dashboard`}
     |            render={(props) => <DefaultLayout {...props} /> }/>
  67 |         />
  68 |     </Switch>

Answer 1

这是因为您没有将 props 传递给您的 HoC。

尝试，（例如）：

//Imports
import HOC from 'path/to/my/hoc';

//...code

const MyHoc = HOC(DashboardContainer);

//Main class
class AppEntry extends React.Component {

//...code

// In the render method take advantage of render prop
render() {
  return (
    //...code
    <Route exact path="/my-path" render={(props) => <MyHoc {...props} />} />

React 无法对未定义的属性路径做出反应

React is unable to react property path of undefined

javascript

session-timeout

reactjs

redux

higher-order-components

React 无法对未定义的 属性 路径做出反应

React is unable to react property path of undefined

javascript

session-timeout

reactjs

redux

higher-order-components

React 无法对未定义的属性路径做出反应