Полезные видео о фронтенде. Подпишись на Rutube

Обработка ввода с состоянием в React

2 года назад·8 мин. на чтение

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

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

Сравнение декларативного пользовательского интерфейса с императивным

Когда вы проектируете взаимодействия с пользовательским интерфейсом, вы, вероятно, думаете о том, как пользовательский интерфейс изменяется в ответ на действия пользователя. Рассмотрим форму, которая позволяет пользователю отправить ответ:

Когда вы вводите что-то в форму, кнопка «Отправить» становится активной.
Когда вы нажимаете «Отправить», и форма, и кнопка блокируются, и появляется анимация ожидания.
Если сетевой запрос выполнен успешно, форма скрывается и появляется сообщение «Спасибо».
Если сетевой запрос завершается неудачно, появляется сообщение об ошибке, и форма снова становится доступной.

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

Водитель не знают, куда вы хотите поехать, он просто следуют вашим командам. (И если вы ошибетесь, вы окажетесь не в том месте) Это называется императивным подходом, потому что вы должны «командовать» каждым элементом, от счетчика до кнопки, сообщая компьютеру, как обновить пользовательский интерфейс. В этом примере императивного программирования пользовательского интерфейса форма создается без использования React. Он использует встроенный в браузер DOM:

async function handleFormSubmit(e) {
  e.preventDefault();
  disable(textarea);
  disable(button);
  show(loadingMessage);
  hide(errorMessage);
  try {
    await submitForm(textarea.value);
    show(successMessage);
    hide(form);
  } catch (err) {
    show(errorMessage);
    errorMessage.textContent = err.message;
  } finally {
    hide(loadingMessage);
    enable(textarea);
    enable(button);
  }
}

function handleTextareaChange() {
  if (textarea.value.length === 0) {
    disable(button);
  } else {
    enable(button);
  }
}

function hide(el) {
  el.style.display = 'none';
}

function show(el) {
  el.style.display = '';
}

function enable(el) {
  el.disabled = false;
}

function disable(el) {
  el.disabled = true;
}

function submitForm(answer) {
  // Pretend it's hitting the network.
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (answer.toLowerCase() == 'istanbul') {
        resolve();
      } else {
        reject(new Error('Good guess but a wrong answer. Try again!'));
      }
    }, 1500);
  });
}

let form = document.getElementById('form');
let textarea = document.getElementById('textarea');
let button = document.getElementById('button');
let loadingMessage = document.getElementById('loading');
let errorMessage = document.getElementById('error');
let successMessage = document.getElementById('success');
form.onsubmit = handleFormSubmit;
textarea.oninput = handleTextareaChange;

<!-- index.html -->

<form id="form">
  <h2>City quiz</h2>
  <p>What city is located on two continents?</p>
  <textarea id="textarea"></textarea>
  <br />
  <button id="button" disabled>Submit</button>
  <p id="loading" style="display: none">Loading...</p>
  <p id="error" style="display: none; color: red;"></p>
</form>
<h1 id="success" style="display: none">That's right!</h1>

<style>
  * {
    box-sizing: border-box;
  }
  body {
    font-family: sans-serif;
    margin: 20px;
    padding: 0;
  }
</style>

Императивное управление пользовательским интерфейсом работает достаточно хорошо для отдельных примеров, но в более сложных системах управлять им становится экспоненциально сложнее. Представьте, что вы обновляете страницу, полную различных форм, подобных этой. Добавление нового элемента пользовательского интерфейса или нового взаимодействия потребует тщательной проверки всего существующего кода, чтобы убедиться, что вы не внесли ошибку (например, забыли что-то показать или скрыть). React был создан, чтобы решить эту проблему. В React вы не управляете пользовательским интерфейсом напрямую — это означает, что вы не включаете, не отключаете, не показываете и не скрываете компоненты напрямую. Вместо этого вы объявляете, что хотите показать, а React выясняет, как обновить пользовательский интерфейс. Подумайте о том, чтобы сесть в такси и сказать водителю, куда вы хотите ехать, вместо того, чтобы указывать ему, где именно повернуть. Доставить вас туда — работа водителя, и они могут даже знать некоторые короткие пути, о которых вы не подумали.

Декларативный подход к пользовательскому интерфейсу

Вы видели, как императивно реализовать форму выше. Чтобы лучше понять, как мыслить в React, выполним реализацию этого пользовательского интерфейса в React:

Определить различные визуальные состояния компонента
Определить, что вызывает эти изменения состояния
Представить состояние в памяти, используя useState
Удалить все несущественные переменные состояния
Подключить обработчики событий для установки состояния

Шаг 1. Определить различные визуальные состояния компонента

В информатике вы могли слышать о «машине состояний» (state machine, стейт машина, конечный автомат), находящейся в одном из нескольких «состояний». Если вы работаете с дизайнером, возможно, вы видели мокапы для разных «визуальных состояний». React стоит на стыке дизайна и информатики, поэтому обе эти идеи являются источниками вдохновения. Во-первых, вам нужно визуализировать все различные «состояния» пользовательского интерфейса, которые может видеть пользователь:

Пусто (empty): в форме отключена кнопка «Отправить».
Ввод (typing): Форма имеет активную кнопку «Отправить».
Отправка (submitting): Форма полностью отключена. Показана анимация ожидания.
Успех (success): вместо формы отображается сообщение «Спасибо».
Ошибка (error): то же, что и состояние ввода, но с дополнительным сообщением об ошибке.

Так же, как дизайнер, вы захотите создавать «макеты» для различных состояний, прежде чем добавлять логику. Например, вот макет только для визуальной части формы. Этот макет управляется пропсом, называемым status, со значением по умолчанию 'empty':

export default function Form({
  // Try 'submitting', 'error', 'success':
  status = 'empty',
}) {
  if (status === 'success') {
    return <h1>That's right!</h1>;
  }
  return (
    <>
      <h2>City quiz</h2>
      <p>
        In which city is there a billboard that turns air into drinkable water?
      </p>
      <form>
        <textarea disabled={status === 'submitting'} />
        <br />
        <button disabled={status === 'empty' || status === 'submitting'}>
          Submit
        </button>
        {status === 'error' && (
          <p className="Error">Good guess but a wrong answer. Try again!</p>
        )}
      </form>
    </>
  );
}

Как отобразить множество визуальных состояний компонента одновременно? Если у компонента много визуальных состояний, как у компонента Form выше, будет удобно показать их все на одной странице. Такие страницы часто называют «живыми руководствами по стилю» (living styleguides) или storybooks.

Шаг 2. Определить, что вызывает эти изменения состояния

Вы можете запускать обновления состояния в ответ на два типа входных данных:

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

В обоих случаях необходимо установить переменные состояния для обновления пользовательского интерфейса. Для формы, которую вы разрабатываете, вам нужно будет изменить состояние в ответ на несколько разных входных данных:

Изменение ввода текста (пользователем) должно переключить его из пустого (empty) состояния в состояние ввода (typing) или обратно, в зависимости от того, пусто текстовое поле или нет.
Нажатие (пользователем) кнопки «Отправить» должно переключить ее в состояние «Отправка» (submitting).
Успешный сетевой ответ (компьютер) должен перевести его в состояние успеха (success).
Неудачный сетевой ответ (компьютер) должен перевести его в состояние (error) с соответствующим сообщением об ошибке.

Обратите внимание, что для ввода пользователя часто требуются обработчики событий. Чтобы визуализировать этот поток, попробуйте нарисовать каждое состояние на бумаге в виде помеченного круга, а каждое изменение между двумя состояниями — в виде стрелки. Таким образом можно набросать множество потоков и разобраться с ошибками задолго до реализации.

Шаг 3: Представить состояние в памяти, используя `useState`

Далее вам нужно представить визуальные состояния вашего компонента в памяти с помощью useState. Ключевым моментом является простота: каждая часть состояния является «движущейся частью», и вам нужно как можно меньше «движущихся частей». Большая сложность приводит к большему количеству ошибок. Начните с состояния, которое обязательно должно быть. Например, вам нужно сохранить ответ для ввода и ошибку (если она существует) для сохранения последней ошибки:

const [answer, setAnswer] = useState('');
const [error, setError] = useState(null);

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

const [isEmpty, setIsEmpty] = useState(true);
const [isTyping, setIsTyping] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const [isError, setIsError] = useState(false);

Ваша первая идея, скорее всего, не будет лучшей, но это нормально — рефакторинг — это часть процесса.

Шаг 4. Удалить все несущественные переменные состояния

Вы хотите избежать дублирования в содержании состояния, чтобы отслеживать только то, что необходимо. Потратив немного времени на рефакторинг вашей структуры состояния, вы облегчите понимание своих компонентов, уменьшите дублирование и предотвратите непреднамеренное значение. Ваша цель — предотвратить случаи, когда состояние в памяти не представляет никакого допустимого пользовательского интерфейса, который вы хотели бы видеть пользователю. (Например, вы никогда не хотите показывать сообщение об ошибке и одновременно отключать ввод, иначе пользователь не сможет исправить ошибку.) Вот несколько вопросов, которые вы можете задать про свои переменные состояния:

Вызывает ли это состояние парадокс? Например, isTyping и isSubmitting не могут одновременно быть истинными. Парадокс обычно означает, что состояние недостаточно ограничено. Существует четыре возможных комбинации двух логических значений, но только три соответствуют действительным состояниям. Чтобы удалить невозможное состояние, вы можете объединить их в состояние, которое должно иметь одно из трех значений: «ввод», «отправка» или «успех».
Доступна ли та же информация в другой переменной состояния? Еще один парадокс: isEmpty и isTyping не могут быть истинными одновременно. Делая их отдельными переменными состояния, вы рискуете рассинхронизировать их и вызвать ошибки. К счастью, вы можете удалить isEmpty и вместо этого проверить answer.length === 0.
Можно ли получить ту же информацию из инверсии другой переменной состояния? isError не нужен, потому что вместо этого вы можете проверить error !== null.

После этой очистки у вас осталось 3 (вместо 7!) основных переменных состояния:

const [answer, setAnswer] = useState('');
const [error, setError] = useState(null);
const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 'success'

Вы знаете, что они необходимы, потому что вы не можете удалить ни один из них, не нарушив функциональность.

Как устраненить «невозможные» состояния с помощью редьюсера

Эти три переменные являются достаточно хорошим представлением состояния этой формы. Тем не менее, есть еще некоторые промежуточные состояния, которые не имеют полного смысла. Например, ненулевая ошибка не имеет смысла, когда статус равен «успех». Чтобы точнее смоделировать состояние, вы можете извлечь его в редьюсер. Редьюсеры позволяют объединить несколько переменных состояния в один объект и объединить всю связанную логику.

Шаг 5: Подключить обработчики событий для установки состояния

Наконец, создайте обработчики событий для установки переменных состояния. Ниже приведена окончательная форма со всеми подключенными обработчиками событий:

import { useState } from 'react';

export default function Form() {
  const [answer, setAnswer] = useState('');
  const [error, setError] = useState(null);
  const [status, setStatus] = useState('typing');

  if (status === 'success') {
    return <h1>That's right!</h1>;
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('submitting');
    try {
      await submitForm(answer);
      setStatus('success');
    } catch (err) {
      setStatus('typing');
      setError(err);
    }
  }

  function handleTextareaChange(e) {
    setAnswer(e.target.value);
  }

  return (
    <>
      <h2>City quiz</h2>
      <p>
        In which city is there a billboard that turns air into drinkable water?
      </p>
      <form onSubmit={handleSubmit}>
        <textarea
          value={answer}
          onChange={handleTextareaChange}
          disabled={status === 'submitting'}
        />
        <br />
        <button disabled={answer.length === 0 || status === 'submitting'}>
          Submit
        </button>
        {error !== null && <p className="Error">{error.message}</p>}
      </form>
    </>
  );
}

function submitForm(answer) {
  // Pretend it's hitting the network.
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let shouldError = answer.toLowerCase() !== 'lima';
      if (shouldError) {
        reject(new Error('Good guess but a wrong answer. Try again!'));
      } else {
        resolve();
      }
    }, 1500);
  });
}

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

Резюме

Декларативное программирование означает описание пользовательского интерфейса для каждого визуального состояния, а не микроуправление пользовательским интерфейсом (императивное).
При разработке компонента:
1. Определите все его визуальные состояния.
2. Определите триггеры пользователя и компьютера для изменения состояния.
3. Смоделируйте состояние с помощью useState.
4. Удалите несущественное состояние, чтобы избежать ошибок и парадоксов.
5. Подключите обработчики событий для установки состояния.

Frontend React Туториал по React

Обновление объектов в состоянии React

2 года назад·10 мин. на чтение

Состояние в React может содержать любое значение JavaScript, включая объекты. Но вы не должны напрямую изменять объекты, которые вы держите в состоянии React. Вместо этого, когда вы хотите обновить объект, вам нужно создать новый (или сделать копию существующего), а затем установить состояние для использования этой копии.

Содержание туториала по React Состояние может содержать любое значение JavaScript, включая объекты. Но вы не должны напрямую изменять объекты, которые вы держите в состоянии React. Вместо этого, когда вы хотите обновить объект, вам нужно создать новый (или сделать копию существующего), а затем установить состояние для использования этой копии.

Что такое мутация?

Вы можете хранить любое JavaScript значение в состоянии.

const [x, setX] = useState(0);

До сих пор вы работали с числами, строками и логическими значениями. Эти виды значений JavaScript являются иммутабельными, то есть неизменяемыми или «только для чтения». Вы можете запустить повторный рендеринг для замены значения:

setX(5);

Состояние x изменилось с 0 на 5, но само число 0 не изменилось. Невозможно внести какие-либо изменения во встроенные примитивные значения, такие как числа, строки и логические значения в JavaScript. Теперь рассмотрим объект в состоянии:

const [position, setPosition] = useState({ x: 0, y: 0 });

Технически возможно изменить содержимое самого объекта. Это называется мутацией:

position.x = 5;

Однако, хотя объекты в состоянии React технически изменяемы, вы должны обращаться с ними так, как если бы они были неизменяемыми — например, числа, логические значения и строки. Вместо того, чтобы изменять их, вы всегда должны заменять их.

Рассматривайте состояние как доступное только для чтения

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

import { useState } from 'react';
export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });
  return (
    <div
      onPointerMove={(e) => {
        position.x = e.clientX;
        position.y = e.clientY;
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}
    >
      <div
        style={{
          position: 'absolute',
          backgroundColor: 'red',
          borderRadius: '50%',
          transform: `translate(${position.x}px, ${position.y}px)`,
          left: -10,
          top: -10,
          width: 20,
          height: 20,
        }}
      />
    </div>
  );
}

Проблема в этом фрагменте кода.

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

Этот код изменяет объект, присвоенный position в предыдущем рендеринге. Но без использования функции установки состояния React не знает, что объект изменился. Так что React ничего не делает в ответ. Это как пытаться изменить заказ после того, как вы уже поели. Хотя в некоторых случаях изменение состояния может работать, мы не рекомендуем его использовать. Вы должны рассматривать значение состояния, к которому у вас есть доступ в рендеринге, как доступное только для чтения. Чтобы в этом случае действительно запустить повторный рендеринг, создайте новый объект и передайте его функции настройки состояния:

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

С помощью setPosition вы говорите React:

Заменить position этим новым объектом
И снова визуализировать этот компонент

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

import { useState } from 'react';
export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });
  return (
    <div
      onPointerMove={(e) => {
        setPosition({
          x: e.clientX,
          y: e.clientY,
        });
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}
    >
      <div
        style={{
          position: 'absolute',
          backgroundColor: 'red',
          borderRadius: '50%',
          transform: `translate(${position.x}px, ${position.y}px)`,
          left: -10,
          top: -10,
          width: 20,
          height: 20,
        }}
      />
    </div>
  );
}

Локальная мутация допустима

Такой код является проблемой, потому что он изменяет существующий объект в состоянии:

position.x = e.clientX;
position.y = e.clientY;

Но такой код допустим, потому что вы мутируете только что созданный новый объект:

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

На самом деле, это полностью эквивалентно написанию этого:

setPosition({
  x: e.clientX,
  y: e.clientY,
});

Мутация представляет собой проблему только тогда, когда вы изменяете существующие объекты, которые уже находятся в состоянии. Модифицировать только что созданный объект можно, потому что никакой другой код еще не ссылается на него. Его изменение не повлияет случайно на что-то, что от него зависит. Это называется «локальной мутацией». Вы даже можете выполнять локальную мутацию во время рендеринга. Очень удобно и совершенно нормально.

Копирование объектов с использованием синтаксиса распыления

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

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'First Name',
    lastName: 'Last Name',
    email: 'user@user.com',
  });

  function handleFirstNameChange(e) {
    person.firstName = e.target.value;
  }

  function handleLastNameChange(e) {
    person.lastName = e.target.value;
  }

  function handleEmailChange(e) {
    person.email = e.target.value;
  }

  return (
    <>
      <label>
        First name:
        <input value={person.firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name:
        <input value={person.lastName} onChange={handleLastNameChange} />
      </label>
      <label>
        Email:
        <input value={person.email} onChange={handleEmailChange} />
      </label>
      <p>
        {person.firstName} {person.lastName} ({person.email})
      </p>
    </>
  );
}

Например, эта строка изменяет состояние из прошлого рендера:

person.firstName = e.target.value;

Надежный способ получить желаемое поведение — создать новый объект и передать его в setPerson. Но здесь вы хотите также скопировать в него существующие данные, потому что изменилось только одно из полей:

setPerson({
  firstName: e.target.value, // Новый firstName из инпута
  lastName: person.lastName,
  email: person.email,
});

Вы можете использовать синтаксис распыления объекта (spread) ..., чтобы вам не нужно было копировать каждое свойство отдельно.

setPerson({
  ...person, // Копирование старых полей
  firstName: e.target.value, // Но с переопределением этого поля
});

Теперь форма работает. Обратите внимание, что вы не объявили отдельную переменную состояния для каждого поля ввода. Для больших форм очень удобно хранить все данные сгруппированными в объекте — при условии, что вы правильно его обновляете.

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'First Name',
    lastName: 'Last Name',
    email: 'user@user.com',
  });

  function handleFirstNameChange(e) {
    setPerson({
      ...person,
      firstName: e.target.value,
    });
  }

  function handleLastNameChange(e) {
    setPerson({
      ...person,
      lastName: e.target.value,
    });
  }

  function handleEmailChange(e) {
    setPerson({
      ...person,
      email: e.target.value,
    });
  }

  return (
    <>
      <label>
        First name:
        <input value={person.firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name:
        <input value={person.lastName} onChange={handleLastNameChange} />
      </label>
      <label>
        Email:
        <input value={person.email} onChange={handleEmailChange} />
      </label>
      <p>
        {person.firstName} {person.lastName} ({person.email})
      </p>
    </>
  );
}

Обратите внимание, что синтаксис распыления объекта ... является «поверхностным» — он копирует элементы только на один уровень вглубь. Это делает его быстрым, но это также означает, что если вы хотите обновить вложенное свойство, вам придется использовать его более одного раза.

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

Вы также можете использовать фигурные скобки [ и ] внутри определения вашего объекта, чтобы указать свойство с динамическим именем. Вот тот же пример, но с одним обработчиком событий вместо трех разных:

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'First Name',
    lastName: 'Last Name',
    email: 'user@user.com',
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value,
    });
  }

  return (
    <>
      <label>
        First name:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input name="email" value={person.email} onChange={handleChange} />
      </label>
      <p>
        {person.firstName} {person.lastName} ({person.email})
      </p>
    </>
  );
}

Здесь e.target.name относится к свойству имени, данному DOM-элементу <input>.

Обновление вложенного объекта

Рассмотрим структуру вложенных объектов, подобную этой:

const [person, setPerson] = useState({
  name: 'Name',
  artwork: {
    title: 'Title Name',
    city: 'City Name',
    image: 'https://example.com/image.jpg',
  },
});

Если вы хотели обновить person.artwork.city, понятно, как это сделать с помощью мутации:

person.artwork.city = 'New Delhi';

Но в React состояние считается иммутабльным. Чтобы изменить city, вам сначала нужно создать новый объект artwork (предварительно заполненный данными из предыдущего), а затем создать новый объект person, который указывает на новый artwork:

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

Или, записанный как вызов одной функции:

setPerson({
  ...person, // Копируем другие поля
  artwork: {
    // но заменяем artwork
    ...person.artwork, // тем же самым
    city: 'New Delhi', // но со значением города 'New Delhi'
  },
});

Это немного многословно, но во многих случаях работает нормально:

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    name: 'Name',
    artwork: {
      title: 'Some Title',
      city: 'Some City',
      image: 'https://example.com/image.jpg',
    },
  });

  function handleNameChange(e) {
    setPerson({
      ...person,
      name: e.target.value,
    });
  }

  function handleTitleChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value,
      },
    });
  }

  function handleCityChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        city: e.target.value,
      },
    });
  }

  function handleImageChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        image: e.target.value,
      },
    });
  }

  return (
    <>
      <label>
        Name:
        <input value={person.name} onChange={handleNameChange} />
      </label>
      <label>
        Title:
        <input value={person.artwork.title} onChange={handleTitleChange} />
      </label>
      <label>
        City:
        <input value={person.artwork.city} onChange={handleCityChange} />
      </label>
      <label>
        Image:
        <input value={person.artwork.image} onChange={handleImageChange} />
      </label>
      <p>
        <i>{person.artwork.title}</i>
        {' by '}
        {person.name}
        <br />
        (located in {person.artwork.city})
      </p>
      <img src={person.artwork.image} alt={person.artwork.title} />
    </>
  );
}

Объекты на самом деле не вложены

Такой объект выглядит «вложенным»:

let obj = {
  name: 'Name',
  artwork: {
    title: 'Some Title',
    city: 'Some City',
    image: 'https://example.com/image.jpg',
  },
};

Однако «вложенность» — это неточный способ представления о том, как ведут себя объекты. Когда код выполняется, нет такого понятия, как «вложенный» объект. Вы действительно смотрите на два разных объекта:

let obj1 = {
  title: 'Some Title',
  city: 'Some City',
  image: 'https://example.com/image.jpg',
};

let obj2 = {
  name: 'Name',
  artwork: obj1,
};

Объект obj1 не находится «внутри» obj2. Например, obj3 также может «указывать» на obj1:

let obj1 = {
  title: 'Some Title',
  city: 'Some City',
  image: 'https://example.com/image.jpg',
};

let obj2 = {
  name: 'Name',
  artwork: obj1,
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1,
};

Если бы вы изменили obj3.artwork.city, это повлияло бы как на obj2.artwork.city, так и на obj1.city. Это связано с тем, что obj3.artwork, obj2.artwork и obj1 являются одним и тем же объектом. Это трудно увидеть, когда вы думаете об объектах как о «вложенных». Вместо этого они представляют собой отдельные объекты, «указывающие» друг на друга со свойствами.

Напишем лаконичный код обновления с помощью Immer

Если ваше состояние глубоко вложено, вы можете подумать сделать его плоским. Но если вы не хотите менять структуру своего состояния, вы можете предпочесть ссылаться на вложенные объекты. Immer — это популярная библиотека, которая позволяет вам писать с использованием удобного, синтаксиса с мутациями и заботится о создании копий для вас. С Immer код, который вы пишете, выглядит так, будто вы «нарушаете правила» и мутируете объект:

updatePerson((draft) => {
  draft.artwork.city = 'Lagos';
});

Но в отличие от обычной мутации, она не перезаписывает прошлое состояние.

Как работает Immer?

draft, предоставленный Immer, представляет собой объект особого типа, называемый Proxy, который «записывает» то, что вы с ним делаете. Вот почему вы можете свободно мутировать его сколько угодно. Под капотом Immer выясняет, какие части draft были изменены, и создает совершенно новый объект, содержащий ваши правки. Чтобы попробовать Immer:

Запустите npm install use-immer, чтобы добавить Immer в качестве зависимости.
Затем замените import {useState} from 'React' на import {useImmer} from 'use-immer'.

Вот приведенный выше пример, преобразованный в Immer:

// App.jsx

import { useImmer } from 'use-immer';

export default function Form() {
  const [person, updatePerson] = useImmer({
    name: 'Name',
    artwork: {
      title: 'Some Title',
      city: 'Some City',
      image: 'https://example.com/image.jpg',
    },
  });

  function handleNameChange(e) {
    updatePerson((draft) => {
      draft.name = e.target.value;
    });
  }

  function handleTitleChange(e) {
    updatePerson((draft) => {
      draft.artwork.title = e.target.value;
    });
  }

  function handleCityChange(e) {
    updatePerson((draft) => {
      draft.artwork.city = e.target.value;
    });
  }

  function handleImageChange(e) {
    updatePerson((draft) => {
      draft.artwork.image = e.target.value;
    });
  }

  return (
    <>
      <label>
        Name:
        <input value={person.name} onChange={handleNameChange} />
      </label>
      <label>
        Title:
        <input value={person.artwork.title} onChange={handleTitleChange} />
      </label>
      <label>
        City:
        <input value={person.artwork.city} onChange={handleCityChange} />
      </label>
      <label>
        Image:
        <input value={person.artwork.image} onChange={handleImageChange} />
      </label>
      <p>
        <i>{person.artwork.title}</i>
        {' by '}
        {person.name}
        <br />
        (located in {person.artwork.city})
      </p>
      <img src={person.artwork.image} alt={person.artwork.title} />
    </>
  );
}

package.json

{
  "dependencies": {
    "immer": "1.7.3",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "use-immer": "0.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

Обратите внимание, насколько лаконичнее стали обработчики событий. Вы можете смешивать и сочетать useState и useImmer в одном компоненте сколько угодно. Immer — отличный способ сделать обработчики обновлений краткими, особенно если в вашем состоянии есть вложенность, а копирование объектов приводит к повторяющемуся коду.

Почему мутирование состояния не рекомендуется в React?

Есть несколько причин:

Отладка: если вы используете console.log и не мутируете состояние, ваши прошлые логи не будут затерты более поздними изменениями состояния. Таким образом, вы можете четко видеть, как состояние менялось между рендерами.
Оптимизация: общие стратегии оптимизации React основаны на пропуске работы, если предыдущие пропсы или состояние такие же, как и следующие. Если не мутируете состояние, очень быстро проверить, были ли какие-либо изменения. Если prevObj === obj, то можете быть уверены, что внутри него ничего не могло измениться.

Новая функциональность. Новая функциональность React, которую создают разработчики React, полагаются на то, что состояние рассматривается как снимок. Если вы мутируете прошлые версии состояния, это может помешать вам использовать новую функциональность.
Изменения требований: некоторые функции приложения, такие как реализация отмены/возврата (undo/redo), отображение истории изменений или предоставление пользователю возможности сбросить форму до более ранних значений, проще реализовать, когда ничего не мутируется. Это связано с тем, что вы можете хранить прошлые копии состояния в памяти и повторно использовать их при необходимости. Если вы начнете с мутативного подхода, впоследствии будет сложно добавить такие функции.
Более простая реализация: поскольку React не полагается на мутацию, ему не нужно делать ничего особенного с вашими объектами. Ему не нужно захватывать их свойства, всегда оборачивать их в прокси или выполнять другую работу при инициализации, как это делают многие «реактивные» решения. По этой же причине React позволяет переводить в состояние любой объект — независимо от его размера — без дополнительных проблем с производительностью или корректностью.

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

Резюме

Рассматривайте все состояния в React как иммутабельные.
Когда вы сохраняете объекты в состоянии, их мутирование не приведет к запуску рендеринга и изменит состояние в предыдущих «снимках» рендеринга.
Вместо того, чтобы мутировать объект, создайте его новую версию и запустите повторный рендеринг, установив для него состояние.
Вы можете использовать синтаксис распыления объектов {...obj, something: 'newValue'} для создания копий объектов.
Синтаксис распыления неглубокий: он копирует только один уровень в глубину.
Чтобы обновить вложенный объект, вам нужно создать копии на всем пути от того места, которое вы обновляете.
Чтобы уменьшить повторяющееся копирование кода, используйте Immer.

Frontend React Туториал по React

Обработка ввода с состоянием в React

Сравнение декларативного пользовательского интерфейса с императивным

Декларативный подход к пользовательскому интерфейсу

Шаг 1. Определить различные визуальные состояния компонента

Шаг 2. Определить, что вызывает эти изменения состояния

Шаг 3: Представить состояние в памяти, используя useState

Шаг 4. Удалить все несущественные переменные состояния

Как устраненить «невозможные» состояния с помощью редьюсера

Шаг 5: Подключить обработчики событий для установки состояния

Резюме

Что такое мутация?

Рассматривайте состояние как доступное только для чтения

Локальная мутация допустима

Копирование объектов с использованием синтаксиса распыления

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

Обновление вложенного объекта

Объекты на самом деле не вложены

Напишем лаконичный код обновления с помощью Immer

Как работает Immer?

Почему мутирование состояния не рекомендуется в React?

Резюме

Шаг 3: Представить состояние в памяти, используя `useState`