Определение объема во время входа в систему с помощью React и реагировать на редукс-firebase

Question

Для проверки подлинности и управления пользователями я использую реагирующую-редукционную базу-огонь. После входа в систему я хочу направить пользователя на его панель мониторинга с помощью URL-адреса «dahboard / userId». Когда пользователь аутентифицирует firebase, он дает нам ответ с идентификатором пользователя. Проблема в том, что когда я пытаюсь завершить навигационный запрос через 'this.history.push (' dahsboard / uid '), я получаю сообщение об ошибке, в котором говорится, что' this 'не определено. Я почти уверен, что это ограниченная проблема, но я не могу понять, как именно мне нужно структурировать код для решения проблемы.

Я уже пытался сохранить uid как const. Я также попытался связать другую асинхронную функцию с запросом. Либо this.props не определен, либо uid не определен.

  onSubmit = (e) => {  
    e.preventDefault();
    // this.props.signIn(this.state);
    this.props.firebase.login(this.state)
    .then(function(res){
      const userId = res.user.user.uid;
      console.log(userId);
      this.props.push('/dashboard/userId');
      // ! Scoping issue  - How to get 'props' in or userId out of this scope
    })
    .catch(
      err => console.log(err.message),    
    )
  }

render() {
    const  authError  = this.props.authError; 
    return(
        <div className="container">
        <div className="row">
          <div className="col-sm-9 col-md-7 col-lg-5 mx-auto">
            <div className="card card-signin my-5">
              <div className="card-body">
              <div className = "red-text center">
                    {authError ? <p> {authError.message}  </p> : null}
              </div>
                <h5 className="card-title text-center">Sign In</h5>
                <form className="form-signin" onSubmit={this.onSubmit}>
                  <div className="form-label-group">
                  <label>Email address
                    <input type="email" id="inputEmail" className="form-control" placeholder="Email address" value={this.state.email} onChange={this.onChangeEmail} required autoFocus />
                    </label>
                  </div>

                  <div className="form-label-group">
                  <label>Password
                    <input type="password" id="inputPassword" className="form-control" placeholder="Password" 
                    value={this.state.password}
                    onChange={this.onChangePassword}
                    required />
                  </label>                   
                  </div>

                  <div className="custom-control custom-checkbox mb-3">
                    <input type="checkbox" className="custom-control-input" id="customCheck1" />
                    <label className="custom-control-label" >Remember password
                    </label>
                  </div>

                  <button className="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
                  <hr className="my-4" />
                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}



export default compose(
  //map firebase redux to props
  firebaseConnect((props) => {

  }),
  connect(
    //map redux-state to props
    (state) => ({
      userId: state.firebase.auth.uid,
      authError: state.firebase.authError,
      auth: state.firebase.auth
    })
  )
)(Login)

Answer 1

Вам необходимо использовать withRouter из «act-router », например так:

export default withRouter(connect(mapStateToProps, {
    ...
})(App));

Тогда он будет доступен через this.props;

Вы также можете передать history черезреквизиты из приложения, если у вас есть вложенный компонент, например:

<NestedComponent history={this.props.history}/>