生命周期方法导致多次重新渲染,由于
错误,我第一次无法获取路径名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'))
没关系。为什么呢?
答案 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);
}
修改强>
我之前没有注意到你有重复的组件名称 - 重定向 - 这会导致无限循环。我已经纠正了这段代码。