Кнопка «Отправить» занимает 2 клика для вызова функции в React

Question

Когда я нажимаю кнопку «Отправить», требуется щелчок, чтобы правильно отключить функцию.У меня не было проблем до реализации, если заявления.Имеет ли он что-то с тем фактом, что у меня есть 2 оператора if внутри и после каждого щелчка он проверяет только 1 оператор if?

  onSubmit = (e) => {

const { firstName, lastName, email, eventDate, validation} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true})
  } else {
    this.setState({validation: false})
    this.setState({errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please fill in all fields properly'})
} 

if (validation) {

  const newEvent = {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  }

  this.props.addEvent(newEvent);

  this.setState({
    firstName: '',
    lastName: '',
    email: '',
    eventDate: '',
    validation: false,
    errorMessage: ''
  });
}

e.preventDefault();
}

Answer 1

Я думаю, что вы используете устаревшее значение проверки в утверждении if (validation).Можете ли вы попробовать что-то вроде:

onSubmit = (e) => {

const { firstName, lastName, email, eventDate} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true})
  } else {
    this.setState({validation: false})
    this.setState({errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please fill in all fields properly'})
} 

const {validation} = this.state // read correct validation.. not something that was previously set

if (validation) {

  const newEvent = {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  }

  this.props.addEvent(newEvent);

  this.setState({
    firstName: '',
    lastName: '',
    email: '',
    eventDate: '',
    validation: false,
    errorMessage: ''
  });
}

e.preventDefault();
}

Answer 2

Исправлена ​​эта проблема, ключом к успеху было перемещение моего оператора if (проверки) в функцию обратного вызова setState.

Вот рабочий код:

  onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state

if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
  if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
    this.setState({validation: true}, () => {
      const newEvent = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        eventDate: eventDate
      }
      this.props.addEvent(newEvent);

      this.setState({
        firstName: '',
        lastName: '',
        email: '',
        eventDate: '',
        validation: false,
        errorMessage: ''
      })
    })
  } else {
    this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
  }
} else {
  this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}

Answer 3

Вам также не нужно иметь два вызова setState непосредственно друг за другом.Вместо этого сделайте их в одном setState, например:

this.setState ({validation: false, errorMessage: 'Пожалуйста, введите правильный адрес электронной почты',)}