Следующий JS Router.push ('/ uri') выдает «Не удается обновить во время существующего перехода состояния» Предупреждение - PullRequest
Новая
       24

Следующий JS Router.push ('/ uri') выдает «Не удается обновить во время существующего перехода состояния» Предупреждение

0 голосов
/ 06 февраля 2019

У меня есть простая форма входа в систему с помощью Redx в Next JS.У меня начальное 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)
...