Reactで配列を更新する8の方法

配列を更新するためには、元の配列を直接変更するのではなく、新しい配列を作成する必要があります。
これはReactの状態更新が非同期に行われるため、直接状態を変更すると意図しない結果を引き起こす可能性があるからです。

では上記の不変性を念頭に、ReactのuseStateを使い配列を更新する方法を調べてみたので書いていきます

---

要素を配列に追加する

sample1

const [array, setArray] = useState([]);

function addItem(item) {
  setArray(prevArray => [...prevArray, item]);
}

配列から要素を削除する

sample2

const [array, setArray] = useState([]);

function removeItem(index) {
  setArray(prevArray => prevArray.filter((item, i) => i !== index));
}

配列の特定の位置に要素を挿入する

sample3

const [array, setArray] = useState([]);

function insertItem(item, index) {
  setArray(prevArray => [
    ...prevArray.slice(0, index),
    item,
    ...prevArray.slice(index)
  ]);
}

配列内の要素を更新する

sample4

const [array, setArray] = useState([]);

function updateItem(index, newItem) {
  setArray(prevArray => prevArray.map((item, i) => i === index ? newItem : item));
}

配列の要素を並べ替える

sample5

const [array, setArray] = useState([]);

function sortArray(comparisonFunction) {
  setArray(prevArray => [...prevArray].sort(comparisonFunction));
}

mapメソッドを使用する

mapメソッドは配列のすべての要素に関数を適用し、その結果からなる新しい配列を作成します。配列内の特定の要素を更新するためには、更新したい要素のインデックスが現在の要素のインデックスと一致する場合に新しい値を返し、それ以外の場合には現在の要素をそのまま返す関数を map に渡します。

sample6

const [array, setArray] = useState([]);

function updateItem(index, newValue) {
  setArray(prevArray =>
    prevArray.map((item, i) => (i === index ? newValue : item))
  );
}

spliceメソッドを使用する

splice メソッドは、配列から要素を削除し、必要に応じて新しい要素を挿入することができます。このメソッドを使用して配列の特定の要素を更新するには、まず元の配列のコピーを作成し、そのコピー上で splice を呼び出します。

sample7

const [array, setArray] = useState([]);

function updateItem(index, newValue) {
  setArray(prevArray => {
    let newArray = [...prevArray];
    newArray.splice(index, 1, newValue);
    return newArray;
  });
}

sliceメソッドを使用する

slice メソッドを使用して、更新したい要素を含む部分配列の前後を切り出し、それらと新しい要素を結合して新しい配列を作成することもできます。

sample8

const [array, setArray] = useState([]);

function updateItem(index, newValue) {
  setArray(prevArray => [
    ...prevArray.slice(0, index),
    newValue,
    ...prevArray.slice(index + 1)
  ]);
}