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}]) 
Вход в полноэкранный режим Выход из полноэкранного режима

Заключение

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

Оцените статью
Procodings.ru
Добавить комментарий