Я пытаюсь создать форму регистрации, используя 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)
Привет, @ OlivierBoissé, я добавил файл формы, содержащий метод onSubmit.
откуда берется пропелка onSubmit? Не вижу вызова функции reduxForm
@ OlivierBoissé, я использую формат формы мастера redux-form.com/8.1.0/examples/wizard
@ OlivierBoissé, я добавил часть полей учетной записи, которая есть в форме мастера. Я думаю, что он содержит функцию reduxform.





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