在 render() 之前使用什么组件生命周期来做某事？

IT技术 javascript reactjs react-router
2021-04-14 10:19:43

我需要检查一些props（来自 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
}

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

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

4个回答

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

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

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

}

返回内部渲染

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
}

更新： 添加super(props)到您的构造函数。我认为它应该可以解决问题。在这种情况下，不需要componentWillMount()。您的代码应该可以正常工作。

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

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

constructor(props) {

}

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

componentWillMount() {
  this.checkObject();
}

render() {
   // some code
}
componentWillMount() 方法不安全，因为它已被弃用。
2021-05-23 10:19:43
React 文档更喜欢 constructor() 用于初始化状态和 API 调用的方法，您可以使用componentDidMount()
2021-05-24 10:19:43
谢谢你。它不安全但尚未弃用。但这很好，如果没有这样的方法，我们怎么能做这种渲染前的事情。我不喜欢把这些东西放进去，render()因为每次渲染（例如之后setState()）代码都会运行，这是不必要的。
2021-06-02 10:19:43
正如问题中所说，他/她不希望渲染被调用。
2021-06-14 10:19:43

history.push()是不会阻止组件初始呈现的副作用，因此它属于componentDidMount.

由于结果取决于props，因此检查可能会在具有本地状态的组件中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()直接调用的声明性替代方案。

其它你可能感兴趣的问题
上一篇在 JSX 代码中嵌入 if 表达式的方法？ 下一篇地图未在 reactjs 中呈现 ui 元素