Ошибка формы Redux при асинхронной проверке Неперехваченное обещание

Я пытаюсь создать форму регистрации, используя 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.info("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)

Проблема, кажется, исходит из метода onSubmit, вы можете показать нам код этого метода?

Olivier Boissé 01.01.2019 23:24

Привет, @ OlivierBoissé, я добавил файл формы, содержащий метод onSubmit.

Vincent Law 01.01.2019 23:51

откуда берется пропелка onSubmit? Не вижу вызова функции reduxForm

Olivier Boissé 01.01.2019 23:56

@ OlivierBoissé, я использую формат формы мастера redux-form.com/8.1.0/examples/wizard

Vincent Law 02.01.2019 00:04

@ OlivierBoissé, я добавил часть полей учетной записи, которая есть в форме мастера. Я думаю, что он содержит функцию reduxform.

Vincent Law 02.01.2019 00:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
5
957
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Даже если вы не укажете ответ, если ваш вызов БД не найдет пользователя, запрос POST все равно получит ответ от вашего маршрута, хотя, вероятно, это будет сообщение об ошибке, в котором говорится, что ответа не было. В любом случае ваш блок .then получит ответ и выдаст ошибку.

Вместо этого вам следует сделать так, чтобы ваш обработчик POST возвращал либо ответ «все ОК», если пользователь не найден, либо сообщение об ошибке, если пользователь уже существует. Если вы используете код ответа HTTP 400 блоков, если пользователь существует, и 200, если нет, тогда ошибка перейдет в блок .catch в вашем запросе axios, и вы сможете обработать его там, тогда как успех перейдет в .then и ты можешь делать там, что хочешь.

Большое вам спасибо за вашу помощь. Мне удалось заставить его работать с вашим советом!

Vincent Law 02.01.2019 11:34

Другие вопросы по теме