Реагировать на состояние объекта и предыдущее состояние

Обычно мы можем использовать несколько переменных состояния для нескольких полей. Они выглядят так.

const [inputName, setInputName] = useState();
const [inputCountry, setInputCountry] = useState();
const [inputLanguage, setInputLanguage] = useState();

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

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

Переменная состояния объекта (множественное значение)

Есть еще один вариант — использовать одну переменную состояния для объекта, содержащего все переменные, например:

const [userInput, setUserInput] = useState({
  inputName: "",
  inputCity: "",
  inputRace: ""
})

Обновление всех значений сразу

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

setUserInput({
  inputName: "Momoji Moji",
  inputCity: "Crystarium",
  inputRace: "Lalafell"
})

Однако это немного сложно, если вы обновляете только одно значение, так как мы не можем установить значение одного без другого.

Обновление только некоторых значений

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

setUserInput(...userInput, inputCity: "Limsa Lominsa"})

Хотя это выглядит многообещающе, есть еще одна сложность, поскольку при работе с React мы никогда не можем быть уверены, что userInput теперь имеет фактическое последнее значение. Это ведет к нашей следующей теме.

Доступ к предыдущему состоянию

Чтобы решить вышеуказанную проблему, мы можем использовать функцию setter.

Функция установки (например, setUserInput) также может принимать функцию обратного вызова. Предоставление функции обратного вызова функции установки возвращает предыдущее состояние для использования в вашей функции обратного вызова. Позвольте мне проиллюстрировать это нашим примером, где мы получаем prevState и используем его с оператором распространения вместо использования переменной состояния userInput.

setUserInput((prevState) => {
  return {...prevState, inputCity: "Limsa Lominsa"}
})

Теперь мы можем быть на 100 % уверены, что новое состояние сохраняет самое последнее предыдущее состояние на момент обновления.

Я надеюсь, что это полезно. Удачного кодирования!