我正在使用react-redux-firebase进行身份验证和用户管理。用户登录后,我想使用dahboard / userId网址将用户导航到其仪表板。当用户通过身份验证后,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)
答案 0 :(得分:0)
您需要像这样通过“ react-router”使用withRouter:
export default withRouter(connect(mapStateToProps, {
...
})(App));
然后可以通过this.props;
如果您有类似这样的嵌套组件,也可以通过App的道具传递history
:
<NestedComponent history={this.props.history}/>