Какой жизненный цикл компонента использовать, чтобы что-то сделать перед render ()?

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

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().

Answer 2

Вы можете использовать компонент Redirect реагирующего маршрутизатора в рамках рендера.

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

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

}

Answer 3

Обновление: Добавьте 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
}

Answer 4

Возврат внутрь рендера

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
}