Как избавиться от эффекта памяти в React?

Question

[vzphvckm]

Допустим компонент-визард (т. е. поэтапная форма), у него есть стейт "step", который определяет, какой этап формы показывается сейчас. Далее:

switch (this.state.step) {
  case "first":
    return <input type="text" name="a" class="form-control" />;
  case "second":
    return <input type="text" name="b" class="form-control" />
}

Все вроде бы работает нормально, но если на первом этапе формы возникают ошибки валидации (добавляем класс is-invalid к инпуту), то этот класс переходит и ко второму новому инпуту на другом этапе, хотя должно этого не быть из-за перерендера. Как избежать этого? Или вычищать все вручную?

Answer 1

[0xD34F]

Ключи добавьте.

Да, в документации говорится про ключи в связи со списками, но реально область их применения шире. Если хотите, чтобы какой-то элемент пересоздавался в случаях вроде вашего, надо назначить различные ключи элементам, создающимся в различных ветках switch'а, условного оператора и т.п. Например: ключей нет - ключи есть.

Но вообще, правильно будет назначать классы в зависимости от значения какого-то свойства в стейте. Тогда и подобных проблем не будет, ключи не понадобятся.

Answer 2

[Дмитрий Свиридов]

Крайне рекомендую не пилить свои алгоритмы обработки формы, а использовать готовые проверенные решения вроде react-final-form или formik. Это очень сильно упростит Вам жизнь и избавит от тонн костылей и велосипедов.

Comments

[Даниил Маслов]

Но если это учебный проект, то стоит написать свой костыль.

[Дмитрий Свиридов]

s0xzwasd, я тоже так думал) Задолбался костылить. Прикрутить react-final-form проще и быстрее.