Question

我需要检查某些道具（来自redux商店）是否为空。如果为空，我希望页面重定向到另一个页面，而不必打扰render()。

当前流程类似于：

constructor(props) {
   this.checkObject();
}

checkObject() {
  if (Object.keys(someObj).length === 0 && someObj.constructor === Object) {
    this.props.history.push("/some-other-route");
  }
}

render() {
   // some code
}

但是，当我执行console.log时，在render()之后调用checkObject()会导致一些错误，因为render()需要一个非空的对象才能正确显示内容。这就是如果对象为空（我通过render()检查）而只是重定向到另一个页面的情况，我什至不想调用checkObject()的原因。

那么有没有一种可以使用的生命周期方法在调用render()之前执行我的重定向代码？

Answer 1

您可以在渲染器中使用react-router的Redirect组件。

import { Redirect } from 'react-router'
render(){

 (checkIfObjectEmpty)?<Redirect to = '/some_route'/>:<JSX>

}

Answer 2

返回内部渲染

constructor(props) {
    this.checkObject();
}

checkObject() {
    return Object.keys(someObj).length === 0 && someObj.constructor === Object
}

render() {
    if(this.checkObject()) return <Redirect to=/some-other-route" />

    //rest of code not run if object is empty
}

Answer 3

更新：将Key-Value back up添加到您的构造函数中。我认为应该可以解决问题。在这种情况下，无需super(props)。您的代码应该可以正常工作。

不安全和临时的解决方案：
您可以使用componentWillMount()。

第一个真正的生命周期方法是componentWillMount（）。此方法仅调用一次，即在初始渲染之前。

componentWillMount()

Answer 4

history.push()是一个副作用，不会阻止组件最初被渲染，因此它属于componentDidMount。

由于结果取决于道具，因此检查可以转到getDerivedStateFromProps，以在具有本地状态的组件中提供redirect标志。在连接到Redux的组件中，可以在mapStateToProps中执行该操作：

connect(({ someObj }) => ({ redirect: !Object.keys(someObj) }))(...)

如果组件将被重定向，则不应该渲染它：

componentDidMount() {
  if (this.props.redirect)
    this.props.history.push("/some-other-route");
}

render() {
   return !this.props.redirect && (
     ...
   );
}

另一个正确提及的答案是，<Redirect>组件是直接调用history.push()的声明性替代。

在render（）之前使用什么组件生命周期来执行某些操作？

4 个答案: