React Tricks Miniseries 7: Как установить состояние для различных типов данных

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

Давайте рассмотрим, как правильно установить состояние react в сценариях с различными типами данных.

Пропустим строки, поскольку они тривиальны.

Числа

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

setNumber(prev => prev + 1) //same for minus, multiple, divide, etc

Состояния объектов задаются с помощью синтаксиса spread:

Objects

setUser(prev => {
  ...user,
  newKey: newValue,
  //OR
  updateKey: updateValue
})

Состояния массивов устанавливаются путем «создания» нового массива внутри setState и простой вставки нового элемента после предыдущего состояния массива.

Массивы

setFruits(prev => [...prev, 'apple']) 
//or
setFruits(prev => [...prev, {name: 'Apple', price: 5}]) 

Заключение

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