Бесконечный цикл при запуске перенаправления из componentDidUpdate с помощью ReactTransitionsGroup

Недавно я реализовал ReactTransitionsGroup для анимации всех переходов моей страницы с помощью react router (компонент Velocty — это просто оболочка ReactTransitionsGroup, поэтому на практике это то же самое):

render () {
        return (
            <div className="app-layout">
                <NavBar location={this.props.location} />
                <VelocityTransitionGroup enter={{ animation: 'pageTransitionIn' }} leave={{ animation: 'pageTransitionOut' }}>
                    {React.cloneElement(this.props.children, {
                        key: this.props.location.pathname,
                    })}
                </VelocityTransitionGroup>
                <TimeOutModal />
                <Notifications />
            </div>
        );
    }

В моей форме регистрации у меня есть компонент формы, который, как только запрос регистрации успешно ответил, props обновится, и компонент запустит перенаправление на следующий шаг регистрации.

class SignUp extends Component {

    componentDidUpdate () {
        if (this.props.signup.success) {
            hashHistory.push('/confirm-signup')
        }
    }

    render() {//....//}

}

Проблема заключается в том, как только перенаправление запускается, я вхожу в бесконечный цикл, так как ReactTransitionsGroup заставляет компонент оставаться в течение нескольких милисекунд, снова вызывая перенаправление.

Мне удается «исправить» это, используя setTimeout на редиректе, но я не нахожу это решение действительно элегантным:

componentDidUpdate () {
        if (this.props.signup.success) {
            setTimeout(() => {
                hashHistory.push('/confirm-signup')
            }, 500)
        }
    }

Вы находите какие-либо другие решения этой проблемы?

Заранее спасибо!

Николас, в 15:37 (источник)

1 ответ

  1. Обычно я бы сказал, чтобы сделать перенаправление в обработчике формы. Исходя из того, что signup.successэто prop, я предполагаю, что вы используете какой-то глобальный магазин, и вам придется переписать кучу кода, чтобы сделать это.

    Редактировать

    В компонент можно добавить hasTransitionedсвойство, которое задается при переходе.

    class Signup extends React.Component {
  hasTransitioned = false

  componentDidUpdate() {
    if (this.props.signup.success && !this.hasTransitioned) {
      this.hasTransitioned = true
      hashHistory.push('/confirm-signup')
    }
  }
}