Объекты в стейтах React

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

Далее в этой статье приведём примеры по работе с объектами внутри стейтов. Начальный пример, о котором пойдёт речь, выглядит так:

import React, { useState } from 'react';

function App() {
   const [obj, setObj] = useState({
      prop1: 'Мышь',
      prop2: 'Сыр',
      prop3: 'Кот',
   });
   
   return <div>
      <p>{obj.prop1}</p>
      <p>{obj.prop2}</p>
      <p>{obj.prop3}</p>
   </div>;
}

export default App;

Попробуем продемонстрировать принцип изменения свойств объекта:

const copy  = Object.assign({}, obj);
copy.prop2 = 'Молоко';
setObj(copy);

Привязка объектов к input полям

Для редактирования значений свойств объекта можно использовать input поля. Но при этом надо помнить, что необходимо написать обработчик ввода (событие "onChange"), который будет выполняться при попытке изменения содержимого поля (как и со всеми другими полями для ввода в React). Напишем код для изменения всех свойств объекта через поля для ввода:

import React, { useState } from 'react';

function App() {
   const [obj, setObj] = useState({
      'prop1': 'Мышь',
      'prop2': 'Сыр',
      'prop3': 'Кот',
   });

   function edit(prop, event) {
      const copy = Object.assign({}, date);
      copy[prop] = event.target.value;
      setObj(copy);
   }

   return <div>
      <input value={obj.prop1} onChange={event => edit('prop1', event)}/>
      <input value={obj.prop2} onChange={event => edit('prop2', event)}/>
      <input value={obj.prop3} onChange={event => edit('prop3', event)}/>
   </div>;
}

export default App;

Код функции "edit" можно упростить, если воспользоваться вычисляемыми именами. Получится так:

function edit(prop, event) {
   setObj({...obj, ...{[prop]: event.target.value}});
}