Обнаружить ошибку при обновлении состояния в React‑компоненте

Условие

В данном фрагменте кода используется функция setState с колбэком, однако в вычислении нового значения свойства есть логическая ошибка. Нужно внимательно рассмотреть, как передаются текущие значения состояния и свойства, и как формируется объект обновления.

this.setState((previous, properties) => {
  return {
    streak: previous.streak + properties.count
  }
})

Объясните, в чём заключается ошибка и как её исправить, учитывая правила иммутабельного обновления состояния в React.

Ответ

В показанном обновлении нет нарушения иммутабельности: возвращается новый объект, а streak вычисляется из предыдущего состояния и актуальных props. Без дополнительных условий объявлять код ошибочным нельзя.

Функциональная форма setState получает previous и properties; она корректна, когда результат зависит от прежнего состояния. Объект previous не изменяется, React объединяет возвращённые поля с состоянием.

Проверять следует контракт данных: оба операнда должны быть числами, иначе + может склеить строки или получить NaN. Если streak должен увеличиваться на единицу, а не на properties.count, это отдельная бизнес-ошибка, которой условие не подтверждает. Вложенные объекты здесь отсутствуют, поэтому глубокое копирование не требуется.