异步验证 Redux 表单错误未捕获的承诺

Question

我正在尝试使用 redux-form 构建一个注册表单。我正在尝试异步验证是否已接收电子邮件。

如果我输入一个已接收的电子邮件，输入框将变为无效（如预期的那样），但是当我输入一个唯一的电子邮件并尝试提交时，我在控制台中遇到以下错误：“Uncaught (in promise) {email:”此电子邮件已被占用"}"

谢谢！

//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)

Answer 1

即使您在 DB 调用未找到用户时未指定响应，POST 请求仍会收到来自您的路由的响应，尽管它可能是一条错误消息，指出没有响应.无论哪种情况，您的 .then 块都会收到响应并抛出错误。

您应该做的是让您的 POST 处理程序在未找到用户时返回一个完全正常的响应，或者如果用户已经存在则返回一个错误消息。如果您在用户存在时使用 400 块 HTTP 响应代码，如果用户不存在则使用 200 则错误将进入 axios 请求的 .catch 块，您可以在那里处理它，而成功将进入.then 你可以在那里做你想做的事。