Массивы в стейтах React

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

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

import React, { useState } from 'react';

function App() {
   const [arr, setValue] = useState(['Тише', 'мыши', 'кот', 'на', 'крыше']);
   
   const result = arr.map((element, index) => {
      return <p key={index}>{element}</p>;
   });

   return <div>
      {result}
   </div>;
}

export default App;

Добавление в массив

Для изменения массива необходимо создать его копию, провести действие над ней и записать обратно в стейт, используя функцию, которая возвращается во втором элементе массива от useState. Пример такого изменения:

const [arr, setValue] = useState(['Тише', 'мыши']);
let copy = Object.assign([], arr);
copy.push('кот');
copy.push('на');
copy.push('крыше');
setValue(copy); // результат: ['Тише', 'мыши', 'кот', 'на', 'крыше']

Метод "Object.assign" используется для копирования значений всех свойств из одного объекта (во втором параметре) другой (в первом параметре).

Код из примера можно сократить, используя деструктуризацию. Результат выполнения будет аналогичен результату из предыдущего примера:

const [arr, setValue] = useState(['Тише', 'мыши']);
setValue([...arr, 'кот', 'на', 'крыше']);

Удаление

Как и в случае с добавлением элемента, нельзя делать операцию над массивом из стейте. Необходимо делать копию и производить действие над этой копией. Попробуем продемонстрировать код для удаления элемента. Используем для удаления метод splice, который принимает в качестве первого аргумента номер элемента массива, с которого начнётся удаление, а вторым количество удаляемых элементов.

const [arr, setValue] = useState(['Тише', 'мыши', 'кот', 'на', 'крыше']);
let copy = Object.assign([], arr);
let index = 2;
copy.splice(index, 1);
setValue(copy); // результат: ['Тише', 'мыши', 'на', 'крыше']

Для сокращения записи можно использовать деструктуризацию:

const [arr, setValue] = useState(['Тише', 'мыши', 'кот', 'на', 'крыше']);
let index = 2;
setValue([...arr.slice(0, index), ...arr.slice(index + 1)]);

Изменение

Пример с изменением массива можно записать так:

const [arr, setValue] = useState(['Тише', 'мыши', 'кот', 'на', 'крыше']);
let copy = Object.assign([], arr);
let index = 2;
copy[index] = 'котята';
setValue(copy); // результат: ['Тише', 'мыши', 'котята', 'на', 'крыше']

Сокращённая запись:

const [arr, setValue] = useState(['Тише', 'мыши', 'кот', 'на', 'крыше']);
let index = 2;
setValue([...arr.slice(0, index), 'котята',...arr.slice(index + 1)]);

Сортировка

React умеет отслеживать не только изменение элементов массива, но и изменение их порядка. К примеру. в результате сортировки. Но как и с другими операциями, необходимо производить действие над копией массива:

const [arr, setValue] = useState(['Тише', 'мыши', 'кот', 'на', 'крыше']);
let copy = Object.assign([], arr);
copy.sort();
setValue(copy); // результат: ['Тише', 'кот', 'крыше', 'мыши', 'на']