Какой жизненный цикл компонента использовать для выполнения каких-либо действий перед render ()?
Мне нужно проверить, являются ли некоторые реквизиты (из магазина 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.info, render() вызывается после checkObject(), что вызывает некоторые ошибки, потому что render() нужен непустой объект для правильного отображения содержимого. По этой причине я не хочу реагировать даже на вызов render(), если объект пуст (что я проверяю через checkObject()), и просто перенаправлять на другую страницу.
Итак, есть ли метод жизненного цикла, который будет выполнять мой код перенаправления до вызова render()?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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
}
Вы можете использовать компонент Redirect для response-router в рендере.
import { Redirect } from 'react-router'
render(){
(checkIfObjectEmpty)?<Redirect to = '/some_route'/>:<JSX>
}
Обновлять:
Добавьте super(props) в свой конструктор. Думаю, это должно решить проблему. В этом случае нет необходимости в componentWillMount(). Ваш код должен работать нормально.
Небезопасное и временное решение:
Вы можете использовать componentWillMount().
The first true life cycle method called is componentWillMount(). This method is only called one time, which is before the initial render.
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 () небезопасен, так как он устарел.
Спасибо. Это небезопасно, но еще не устарело. Но это хороший момент, если такого метода не будет, как мы могли бы делать такие вещи до рендеринга. Я не люблю помещать это в render(), потому что при каждом рендере (например, после setState()) код запускается, а в этом нет необходимости.
Документация React предпочитает метод constructor() для инициализации состояний, а для вызовов API вы можете использовать componentDidMount().
Как было сказано в вопросе, он / она не хочет, чтобы рендер вызывал.
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будет называться не смотря ни на что. Однако вы можете сделатьthis.state.isValid: this.checkObject()и в рендереthis.state.isValid ? <JSX> : null