引起的React生命周期方法无法读取undefined的属性'pathname'

时间:2018-03-31 13:13:11

标签: reactjs ecmascript-6 redux

生命周期方法导致多次重新渲染,由于

错误,我第一次无法获取路径名
cannot read property 'pathname' of undefined

我在高阶组件中有这段代码

@connect(state=>state.job,{})
export default function CheckPermission(EnhancedComponent) {
  return class Redirect extends Component {

    componentWillMount() {
      //error is here
      this.on_applied_job_route = this.props.location.pathname.includes('applied_job')
    }

    render() {
      if (this.props.has_applied_job && !this.on_applied_route) {
        return <Redirect to={`/dashboard/ad/${this.props.has_applied_job}/applied_job`} />
      }

      return <EnhancedComponent { ...this.props } />
    }
  }
}

奇怪的是,如果我删除render方法中的逻辑并执行此操作 console.log(this.props.location.pathname.includes('applied_job'))没关系。为什么呢?

1 个答案:

答案 0 :(得分:0)

  

无法读取属性&#39;路径名&#39;未定义的

意味着location道具未被传递。除非你展示你如何使用这个HOC,否则我猜你只是不通过它。尝试:

import { withRouter } from 'react-router';

@connect(state=>state.job,{})
export default function CheckPermission(EnhancedComponent) {
  class WithRedirect extends Component {

    componentWillMount() {
      //error is here
      this.on_applied_job_route = this.props.location.pathname.includes('applied_job')
    }

    render() {
      if (this.props.has_applied_job && !this.on_applied_route) {
        return <Redirect to={`/dashboard/ad/${this.props.has_applied_job}/applied_job`} />
      }

      return <EnhancedComponent { ...this.props } />
    }
  }

  return withRouter(WithRedirect);
}

修改

我之前没有注意到你有重复的组件名称 - 重定向 - 这会导致无限循环。我已经纠正了这段代码。