我正在使用react-redux-firebase进行身份验证和用户管理。当用户登录时,我想用" dahboard/userId"的URL将用户导航到其仪表板。当用户身份验证的firebase为我们提供了在此处具有用户ID的响应。问题是当我尝试通过'this.history.push('dahsboard/uid'(完成导航请求时,我会遇到一个错误,说"这"是不确定的。我很确定这是一个范围的问题,但是我无法确切地弄清楚如何构建代码来解决问题。
我已经尝试将UID存储为const。我还试图根据请求将另一个异步的funciton链接起来。要么是不确定的,要么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)
您需要从" react-router"之类的with-so:
export default withRouter(connect(mapStateToProps, {
...
})(App));
然后可以通过this.props;
访问它,如果您的嵌套组件类似:
,也可以通过应用程序传递history
。 <NestedComponent history={this.props.history}/>