DOM и React Middle Состояние и useState/useReducer обновлено
Обновление объекта в состоянии
Условие
Форма с полями name и email в одном объекте состояния. Изменение одного поля не должно затирать другое.
Что проверяют тесты
пишет оба поля
не затирает соседнее поле
Как подойти
setForm(prev => ({ ...prev, [key]: value })) - единственная безопасная форма. Мутация form.name = … не вызовет рендер, потому что ссылка та же. Вычисляемый ключ [key] позволяет одним обработчиком закрыть все поля.
Подсказки: 2
- Состояние-объект нужно обновлять новой ссылкой, иначе React не увидит изменения.
- Спред предыдущего состояния + перезапись одного ключа.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация