我正在尝试使用redux-form构建注册表单。我正在尝试异步验证是否已收到电子邮件。
如果我输入一封电子邮件,输入框将变为无效(如预期的那样),但是当我输入唯一的电子邮件并尝试提交时,我在控制台中遇到了以下错误:"未捕获(承诺){电子邮件:"此电子邮件已被接收"}"
谢谢!
//asyncValidate.js
import axios from 'axios';
const asyncValidate = (values)=>
{
return axios.post('/api/emails',{email:values.email})
.then(res => {
if (res) {
throw { email: "This email has already been taken."};
}
})
}
export default asyncValidate;
//route.js
app.post('/api/emails', (req, res)=>{
User.findOne({email: req.body.email},(err,user)=>{
if (err) {console.log("error");}
else {res.json(user)};
});
});
//SignUpForm.js
import {Grid } from 'semantic-ui-react';
import AccountFields from './AccountFields';
import ContactFields from './ContactFields';
import HistoryFields from './HistoryFields';
import WaiverFields from './WaiverFields';
import * as actions from '../../actions';
import { withRouter } from 'react-router-dom';
class SignUpForm extends Component {
constructor(props){
super(props)
this.nextPage = this.nextPage.bind(this)
this.previousPage = this.previousPage.bind(this)
this.state ={
page:1
}
}
nextPage(){
this.setState({ page:this.state.page + 1})
}
previousPage(){
this.setState({ page: this.state.page - 1 })
}
render(){
const { onSubmit,submitForm, history } = this.props
const { page } = this.state
return(
<div>
<Grid textAlign='center' style={{ height: '1000px' }} verticalAlign='middle'>
<Grid.Column style={{ maxWidth: 700 }} textAlign='left'>
{page === 1 && <AccountFields onSubmit={this.nextPage}/>}
{page === 2 && (
<ContactFields
previousPage={this.previousPage}
onSubmit={this.nextPage}
/>
)}
{page === 3 && (
<HistoryFields
previousPage={this.previousPage}
onSubmit={this.nextPage}
/>
)}
{page === 4 && (
<WaiverFields
previousPage={this.previousPage}
onSubmit={(v)=>submitForm(v,history)}
/>
)}
</Grid.Column>
</Grid>
</div>
export default connect(null,actions)(withRouter(SignUpForm));
//AccountFields.js
class AccountFields extends Component {
render(){
const { handleSubmit} = this.props
return(
<Form size='large' onSubmit={handleSubmit}>
<Segment stacked>
<Header as='h1' color='black' textAlign='left'>
<Image src={icon1} />
<Header.Content>
Create your Account
<Header.Subheader> to make an online appointment</Header.Subheader>
</Header.Content>
</Header>
<Field
name='email'
label='E-mail'
component={renderField}
as={Form.Input}
type='email'
icon='user'
iconPosition='left'
placeholder='E-mail Address'
/>
<Form.Group widths='2'>
<Field
name='password'
label='Password'
component={renderField}
as={Form.Input}
type='password'
icon='lock'iconPosition='left'
placeholder='Password'/>
<Field
name='password1'
label='Confirm Password'
icon="lock" iconPosition='left'
component={renderField}
as={Form.Input}
type='password'
placeholder='Confirm Password'
/>
</Form.Group>
<Button type='submit'style={{marginTop:'5px'}} color='black' floated='right' compact size='large'>
Next
</Button>
<Link to='/login' >
<Button style={{marginTop:'5px'}}color='black' basic floated='left'>Log In Instead </Button>
</Link>
<br></br>
<br></br>
</Segment>
</Form>)}}
export default reduxForm({
form: 'wizard', // <------ same form name
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate,
asyncValidate,
asyncBlurFields: ['email']
})(AccountFields)
即使您的数据库调用找不到用户,您没有指定响应,POST 请求仍将收到来自路由的响应,尽管它可能是一条错误消息,指出没有响应。无论哪种情况,您的.then
块都将收到响应,从而引发错误。
相反,您应该做的是让您的 POST 处理程序返回"一切正常"响应(如果未找到用户)或错误消息(如果用户已存在)。如果你使用400块HTTP响应代码(如果用户存在),如果他们不存在,则使用200块,那么错误将进入axios请求的.catch
块,你可以在那里处理它,而成功将进入.then
,你可以在那里做你想做的事。