React 组件在首次提交时未显示 Flash 消息

Question

我有以下用于用户注册的组件。我知道它正在控制台输出的后端工作，如果成功，则会在数据库中创建对象。问题是，如果我第一次访问此页面，它似乎会在显示更新的组件后立即以某种方式重新加载页面。如果我再次提交数据，这可能是产生错误或创建新用户的数据，然后显示 flash 消息。

发生这种情况时，我在控制台中收到一条消息，当组件加载并转储 props 时，指出"props：changeReload"。我尝试查找此内容，但找不到任何信息。

import React, {Component} from 'react';
import AuthService from '../auth/AuthService';
import axios from 'axios';
import {
Row,
Col,
Container,
InputGroup,
Form,
Button
} from "react-bootstrap";
export default class RegisterForm extends Component {
constructor(props) {
super(props);
this.handleChangeUsername = this.handleChangeUsername.bind(this);
this.handleChangePassword = this.handleChangePassword.bind(this);
this.handleChangeChk = this.handleChangeChk.bind(this);
this.handleChangeEmail = this.handleChangeEmail.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {messages: []};
this.Auth = new AuthService();
}
handleChangeUsername(event) {
this.setState({username: event.target.value});
}
handleChangePassword(event) {
this.setState({password: event.target.value });
}
handleChangeChk(event) {
this.setState({chk: event.target.value});
}
handleChangeEmail(event) {
this.setState({email: event.target.value });
}
handleSubmit(event) {
return axios.post(localStorage.getItem('base_url')+'/user/register/', {
username: this.state.username, pass: this.state.password,
chk: this.state.chk, email: this.state.email
}).then(res => {
console.log("This is the data");
console.log(res["data"]);
if (res["data"].success) {
this.props.setFlash("true",res["data"].messages,"info");
} else {
this.props.setFlash("true",res["data"].messages,"error");
}
this.setState({messages: res["data"].messages});
this.setState({success: res["data"].success});
})
}
componentDidMount(){
}
render() {
return (
<Container>
<Row><Col><h3>Register</h3></Col></Row>
<Row><Col><p>Complete the form below.</p></Col></Row>
<Row>
<Col>
<Form onSubmit={this.handleSubmit}>
<Form.Group>
<Form.Label>Username:</Form.Label>
<Form.Control type="text"  value={this.state.username} onChange={this.handleChangeUsername} />
</Form.Group>
<Form.Group>
<Form.Label>Password:</Form.Label>
<Form.Control type="password" value={this.state.password} onChange={this.handleChangePassword} />
</Form.Group>
<Form.Group>
<Form.Label>Confirm Password:</Form.Label>
<Form.Control type="password" value={this.state.chk} onChange={this.handleChangeChk} />
</Form.Group>
<Form.Group>
<Form.Label>Email Address:</Form.Label>
<Form.Control type="email" value={this.state.email} onChange={this.handleChangeEmail} />
</Form.Group>
<Button variant="primary" type="submit" value="Submit">
Submit
</Button>
</Form>
</Col>
</Row>
<Row>
<Col>{this.state.success ? <p>Registration Successful</p> : <p></p> }</Col>
</Row>
</Container>
)
}
}

对不起，解释不好，我很难很好地解释这一点。我希望有人能够认识到这是什么。

Answer 1

您的表单正在提交到默认 URL，即您当前的 URL，这就是页面重新加载的原因。

将此添加到handleSubmit顶部以避免它：

handleSubmit(event) {
event.preventDefault();
// ...
}