Question

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

错误，我第一次无法获取路径名

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'))没关系。为什么呢？

Answer 1

无法读取属性＆＃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);
}

修改

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

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

1 个答案: