ReactJs-成功登录后在页面外转换时发出警告

Question

我有一个直接的登录页面，它调用一个api服务来验证用户登录：

登录.js

@connect(
  state => ({user: state.auth.user}),
  authActions)
class Login extends React.Component {
  ......
  _handleSubmit = (event) => {
     .....
    this.props.login({username: username.value, password: password.value},
     (result) => {
      return result;
    });
    ......
  };
  render() {
    const {user, logout} = this.props;
    return (
      <section>
        {
          !user ?
            ... Show login page with submit button .....
            : this.context.router.replace('/')
        }
      </section>
    )
  }
};

当组件按预期工作时，我收到警告：

无法在现有状态转换期间进行更新（例如render或另一个组件的构造函数）。渲染方法应为纯粹的道具和状态功能；构造函数的副作用是反模式，但可以移动到componentWillMount

我知道这个警告是由于路由器的更换状态造成的，但我不知道防止这个警告的最佳方法是什么，如果用户存在，仍然可以实现离开登录页面的目标。

有什么想法吗？

更新

Abdud Dayan Adeeb找到了解决方案。。。。。

  componentWillReceiveProps(nextProps ) {
    if (nextProps.user) this.context.router.replace('/')
  }

Answer 1

我在这里看到的问题是，当组件渲染/更新时，您试图尝试转换。

最好的做法是将转换逻辑移动到组件的componenetWillReceiveProps函数

componenentWillReceiveProps(nextProps) {
    if (nextProps.user) this.context.router.replace('/')
}