React 19: почему return { error } не предотвращает очистку формы
Форма показывает ошибку сохранения, но введённый текст уже исчез. Такое возможно при использовании функции в action: после её нормального завершения React сбрасывает неконтролируемые поля.
Минимальный пример без сервера — обработчик намеренно всегда возвращает ошибку:
import { useActionState } from "react"; export default function Form() { const [state, action] = useActionState( async () => ({ error: "Сохранение отклонено" }), { error: "" } ); return ( <form action={action}> <label> Сообщение <textarea name="message" defaultValue="" /> </label> <button type="submit">Сохранить</button> {state.error && <p role="alert">{state.error}</p>} </form> ); }
Введите текст и отправьте форму. Сообщение об ошибке появится, а поле вернётся к пустому defaultValue. Функция завершилась без исключения; свойство error для React — обычные данные, а не указание сохранить содержимое формы.
Один из способов оставить текст для исправления — контролируемое поле с value и onChange. Его состояние можно очищать только после подтверждённого сохранения. Наличие state.error само по себе значениями полей не управляет.
Бросать исключение только ради предотвращения сброса — другая крайность: оно передаёт обработку ближайшему Error Boundary и не заменяет управление черновиком.
Показать ошибку — только половина задачи. Пользователь должен получить возможность исправить уже написанное, поэтому поведение полей при отказе стоит проверять отдельно от сообщения об ошибке.
Итак, вопрос: в ваших тестах формы проверяется, что введённый текст остаётся на месте после неудачного сохранения?
