Question

我最近使用反应路由器实现了ReactTransitionsGroup来动画我的所有页面转换（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使组件停留几毫秒，再次触发重定向。

我设法＆＃34;修复＆＃34;它，在重定向上使用setTimeout，但我发现这个解决方案非常优雅：

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

您是否找到了此问题的其他解决方案？

提前致谢！

Answer 1

通常我会说你在表单处理程序中进行重定向。基于signup.success是道具的事实，我假设你正在使用某种全局存储，你必须重写一堆代码才能做到这一点。

修改

您可以向组件添加hasTransitioned属性，该属性在转换时设置。

class Signup extends React.Component {
  hasTransitioned = false

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

使用ReactTransitionsGroup从componentDidUpdate触发重定向时的无限循环

1 个答案:

修改