Как проверить дублирование добавления на клиенте в React?

Question

[Unknown]

Привет!
У меня есть 2 поля email и name и кнопка submit.
После нажатия на кнопку форма сабмитится и срабатывает такой код

validate(state, form) {
    // сначала валидируем 
     ...
    return this.request(form);
  }
  request(form) {
    // затем отправляем запрос
    ...
   return fetch(...)
  }

  handleSubmit(e) {
    e.preventDefault();

    return this.validate(this.state.emailData, e.target);
  }

Сейчас запросы отправляются при каждом нажатии на кнопку. Я хочу провалидировать форму после нажатия submit например как в методе componentDidUpdate который вернет мне предыдущие props (который я не использую потому что этот метод срабатывает при каждом изменении состояния и в моем классе присутствует onChange который и меняет это состояние при вводе текста в input).
Как реализовать такое же поведение что и в componentDidUpdate, но только после нажатия на кнопку submit?

Answer 1

[yanis_kondakov]

state: { hadSubmitted: false, };

componentDidUpdate(prevProps, prevState) {
    const { hadSubmitted } = this.state;

    if (hadSubmitted) {
        //...validate
    }
}

handleSubmit(e) {
    ...
    this.setState({
       hadSubmitted:  true,
    });
}

validate(state, form) {
    ...
    this.setState({ hadSubmitted: false, })
}

Comments

[Unknown]

думал об этом, но ждал чего-то еще.
Спасибо :)

Answer 2

[Максим]

Мне кажется в задаче немного неверный порядок. Обычное решение следующее:

Кнопке submit делаем атрибут disabled, который проставляется в результате работы функции validate. Внутри validate проверяем - валидная форма или нет. Если валидная - disabled=false и юзер может отправить форму, итого имеем "досерверную валидацию". Затем, если пришла с сервера ошибка - показываем ее и снова ставим disabled=true, до тех пор, пока не будет изменений.

valiadte = () => {
  if (форма не валидная) {
    return false
  }
  return true
}
render() {
<form> ...
<button disabled={this.validate()}> отправить </button>
}
...

Главное в том, что вы вызываете this.validate() внутри метода render, а это значит, что на каждое изменение state (ваших данных формы), будет перерендер и следовательно вызов validate. То есть, всегда актуальное состояние.

> Я хочу провалидировать форму после нажатия submit
Зачем? лучше сразу запрещать отправлять форму, если она не валидная. Так и для UI понятнее, и вам код организовать проще будет.

Comments

[Unknown]

я наверное плохо описал условие задачи и вы не поняли что я имел ввиду, но спасибо за идею реализации валидации