使用 React 和 react-redux-firebase 在登录期间确定范围

Posted 2023-04-12

【中文标题】使用 React 和 react-redux-firebase 在登录期间确定范围

【英文标题】：Scoping during Login with React and react-redux-firebase

【发布时间】：2019-10-01 11:04:27

【问题描述】：

我正在使用 react-redux-firebase 进行身份验证和用户管理。一旦用户登录，我想使用 'dahboard/userId' 的 url 将用户导航到他们的仪表板。当用户进行身份验证时，firebase 会给我们一个包含用户 ID 的响应。问题是当我尝试通过 '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)

【参考方案1】：

您需要像这样使用“react-router”中的 withRouter：

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

然后就可以通过this.props访问了；

如果你有这样的嵌套组件，你也可以通过 App 中的 props 传递 history：

<NestedComponent history=this.props.history/>

【讨论】：

我刚刚在最初的问题中添加了更多细节。谢谢你的建议。由于我使用的是 connect 和 compose，这将如何影响我导出组件的方式？