> Почему форма отправляется два раза при сабмите в React (React, JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Milk and Cartoons

Стек: React, JavaScript

> Пример ответа

Двойная отправка формы в React чаще всего возникает из-за того, что обработчик сабмита вызывается как через атрибут onSubmit на <form>, так и через onClick на кнопке отправки (особенно если кнопка имеет type="submit" по умолчанию). В результате событие срабатывает дважды: сначала при клике на кнопку, затем при сабмите формы.

Пример проблемы:

JSX
function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Отправка');
    // отправка данных
  };

  return (
    <form onSubmit={handleSubmit}>
      <button onClick={handleSubmit}>Отправить</button> {/* ❌ двойной вызов */}
    </form>
  );
}

Решение: используйте только onSubmit на форме, а кнопку сделайте без onClick:

JSX
<form onSubmit={handleSubmit}>
  <button type="submit">Отправить</button> {/* ✅ один вызов */}
</form>

Другие причины:

Строгий режим (StrictMode) в React - в dev-среде он может дважды вызывать эффекты и обработчики для выявления побочных эффектов. В production такого не происходит.
Непреднамеренный повторный сабмит из-за асинхронной отправки (например, при повторном клике до завершения запроса). Решение - блокировать кнопку после первого нажатия (disabled).
Ошибка в e.preventDefault() - если его не вызвать, браузер может выполнить стандартную отправку формы, а React-обработчик сработает дополнительно.

Проверьте свой код: уберите лишние обработчики с кнопки и добавьте e.preventDefault() в onSubmit.