如何解决重新渲染Reactjs之后,父组件立即失去状态
我是React的新手,我试图编写一个在启动时会自动显示登录页面的应用程序,并且当用户成功登录父组件时,它会更新其状态以呈现仪表板组件而不是登录。
我发现的是,当用户登录时,它会正确更新父组件的状态并显示Dashboard组件一秒钟,但随后其状态再次更改并重新呈现Login组件。我认为是某种原因导致状态重置,但是我不确定是什么原因。
User.js:
class User extends Component {
constructor(props) {
super(props);
this.state = {
email: '',isLoggedIn: false
}
this.updateUser = this.updateUser.bind(this);
}
updateUser(newEmail) {
console.log(`Entered User.updateUser,email: ${newEmail}`);
this.setState({
email: newEmail,isLoggedIn: false
});
}
render() {
if (this.state.isLoggedIn) {
return <Dashboard/>
}
return <Login updateTheUser={this.updateUser}/>
}
}
export default User;
Login.js:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',password: '',};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleResponse = this.handleResponse.bind(this);
}
handleEmailChange(event) {
this.setState({email: event.target.value})
}
handlePasswordChange(event) {
this.setState({password: event.target.value})
}
handleResponse(res) {
if (res.ok) {
alert('Login Successful!');
this.props.updateTheUser(this.state.email);
}
else if (res.status === 401) {
alert('Wrong Username or Password');
}
}
async sendLoginRequest(data) {
await fetch('http://localhost:8000/login/',{
method: 'POST',headers: { 'Content-Type': 'application/json'},body: data,})
.then(this.handleResponse)
.catch(function(error) {
alert('Server error,please try again.');
console.error(error);
});
}
handleSubmit(event) {
const data = `{"email": "${this.state.email}","password": "${this.state.password}"}`
this.sendLoginRequest(data);
}
render () {
return (
<div id="container" className="col-md-12" align="center">
<div id="vertical-center-div"className="col-sm-4 card bg-light">
<Form onSubmit={this.handleSubmit}>
<Form.Label className="display-4 text-secondary">Login</Form.Label>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" value={this.state.email} onChange={this.handleEmailChange} placeholder="Email" required/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" value={this.state.password} onChange={this.handlePasswordChange} placeholder="Password" required/>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<Button id="submitButton" variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
</div>
)
}
}
export default Login;
Dashboard.js:
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
expenses: [],incomings: []
}
}
render () {
return (
<>
<p className="display-4">Dashboard</p>
</>
)
}
}
export default Dashboard;
解决方法
似乎,在Login.js
中,您需要防止使用event.preventDefault()
的默认提交行为
handleSubmit(event) {
event.preventDefault()
const data = `{"email": "${this.state.email}","password": "${this.state.password}"}`
this.sendLoginRequest(data);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。