Если данные формы пропадают при переходе назад, приложение теряет состояние компонента при размонтировании, сбрасывает store, заново получает пустые данные или не сохраняет черновик.

Сначала нужно понять, где должны жить данные формы: внутри компонента, в глобальном store, в URL, в localStorage/sessionStorage или на backend как черновик.

Коротко: что делать

  • Повторить сценарий: заполнение, переход, возврат
  • Проверить, размонтируется ли компонент формы
  • Проверить состояние store до и после перехода
  • Проверить, не перезаписывает ли API форму пустым ответом
  • Решить, нужно ли сохранять черновик локально или на сервере

Основные причины

У этой проблемы редко бывает одна универсальная причина. Обычно нужно проверить связку настроек, данных, кода и внешних сервисов, а потом уже выбирать способ исправления.

  • Форма хранит данные только в локальном state компонента
  • Router при переходе уничтожает компонент
  • Store очищается при смене шага
  • API-ответ перезаписывает уже введенные данные
  • Браузерная кнопка назад не поддержана логикой приложения

Пошаговая диагностика

Диагностику лучше вести от конкретного примера: один пользователь, один запрос, один документ, одно событие или один экран. Так проще увидеть точку, где система начинает вести себя неправильно.

  • Посмотреть state через React/Vue Devtools
  • Поставить лог mount/unmount компонента
  • Проверить порядок API-запросов при возврате
  • Проверить работу на refresh страницы
  • Проверить мобильный браузер и системную кнопку назад

Как исправить проблему

Исправление должно закрывать корневую причину, а не только внешний симптом. Если проблема связана с доступами, платежами, данными или безопасностью, сначала стоит сделать резервную копию и проверить правку на тестовом сценарии.

  • Перенести состояние формы в store или родительский wizard-state
  • Сохранять черновик в sessionStorage/localStorage для коротких сценариев
  • Добавить server-side draft для важных заявок
  • Не перезаписывать заполненные поля пустым API-ответом
  • Корректно обработать browser back и route guards

Безопасный план решения

Сначала определите критичность формы. Для простой формы хватит локального черновика, для заказа или анкеты лучше сохранять данные на backend.

Чего не стоит делать

  • Не хранить чувствительные данные в localStorage без оценки риска
  • Не очищать store при каждом переходе без причины
  • Не полагаться только на автозаполнение браузера
  • Не блокировать кнопку назад без понятного UX

Что подготовить перед исправлением

  • Ссылка на форму или экран
  • Шаги, при которых данные пропадают
  • Фреймворк и form library
  • Код компонента или store

FAQ

Где лучше хранить данные многошаговой формы?

Для SPA часто подходит store, а для важных заявок — черновик на сервере.

Можно ли использовать localStorage?

Можно для несекретных данных и коротких сценариев, но нужно помнить о приватности.

Почему данные пропадают только при кнопке назад?

Router может восстанавливать маршрут, но не локальный state компонента, если он был размонтирован.

Когда стоит обратиться за помощью

Обратиться стоит, если форма длинная, связана с заявкой, оплатой, регистрацией или пользователи часто бросают ее из-за потери данных.

Итог

Начните с проверки lifecycle и места хранения state. Если нужно сохранить формы в React/Vue без потери данных, можно написать в Telegram @rabotator_support.