javascript - Next JS Router.push('/uri') 抛出“Cannot update during an existing state transition”警告

Question

我在 Next JS 中有一个带有 redux 的简单登录表单。我有一个初始user状态：

     {
      user: {}
     }

并在表单提交后，login dispatch会发生。状态将是：

     {
      user: {
        authenticated: true",
        ....
      }
     }

所以每当我提交表单时，我希望我可以authenticated通过 mapStateToProps 轻松获得。所以我有一个条件来检查是否authenticated为真，所以我现在可以redirect从登录表单到仪表板。

代码是：

    static getDerivedStateFromProps(props, state) {
        const user = props.user.user
        if (user && user.authenticated) {
          Router.push('/dashboard') =====> culprit?
        } 
        return null
    }

但是，我收到Cannot update during an existing state transition控制台警告。

我最初使用componentWillReceiveProps但令我惊讶的是，文档说应该避免它，因为它成为遗留代码。

为什么会这样？是因为错误的生命周期吗？我也尝试过shouldComponentUpdate等，但它也不起作用。

我应该如何正确实施它？

完整代码如下：

  import React, { Component } from 'react'
  import { connect } from 'react-redux'
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faLock } from '@fortawesome/free-solid-svg-icons'
  import Router from 'next/router'

  import { login } from '../actions'


  class Login extends Component {
    state = {
      username: 'admin',
      password: 'Password',
    }

    static getDerivedStateFromProps(props, state) {
      const user = props.user.user
      if (user && user.authenticated) {
        Router.push('/dashboard') =======> culprit?
      }
      return null
    }

    handleChange = e => {
      const { name, value } = e.target
      this.setState({ [name] : value })
    }

    handleSubmit = e => {
      e.preventDefault()
      this.props.login(this.state)
    }

    render() {
      const { username, password } = this.state
      return (
        <div id="content">
          <div className="logo">
            <div className="">
              <div><img src="/static/images/login1.png" alt="Login1" align="left" /></div>
            </div>
            <div className="">
              <div><img src="/static/images/login2.png" alt="Login2" align="left" width="350" /></div>
              <div><p><span className="system_name">Information System v1.0</span></p></div>
            </div>
          </div>
          <div className="login">
            <div className="header">
              <div className="text">
                <div className="lock">
                  <center>
                    <FontAwesomeIcon icon={faLock} />
                  </center>
                </div>
              </div>
              <p>LOGIN</p>
            </div>
            <div className="content">
              <form onSubmit={e => this.handleSubmit(e)}>
                <p>Please login to access all our features</p>
                <input
                  type="text"
                  placeholder="Username"
                  name="username"
                  value={username}
                  autoComplete="off"
                  onChange={this.handleChange}
                />
                <input
                  type="password"
                  placeholder="Password"
                  name="password"
                  value={password}
                  autoComplete="off"
                  onChange={this.handleChange}
                />
                <button
                  type="submit"
                >
                  <span>{this.props.user.isLoading ? 'Logging In....' : 'Login'}</span>
                </button>
              </form>
              <a href="#">Forgot Password?</a>
            </div>
          </div>
        </div>
      )
    }
  }

  const mapStateToProps = ({user}) => ({
    user,
  })

  export default connect(mapStateToProps, { login })(Login)

标签： javascriptreactjsreduxnext.js