useStateでの配列の扱い

配列の削除で少しつまづいたのでメモ程度に

配列へ要素の追加

まずおさらいで配列の追加


stringの配列を想定する。

const [ array, setArray ] = useState<string[]>([]);

const addFunction  = (): void => {
  setArray([ ...array, "追加する要素"] );
}

useStateではスプレット構文で配列をコピーして追加するのが一般的。

配列の削除

今回は配列のindexを指定して、該当の要素を削除するものとする。

ダメな例

const deleteFunction  = (index: number): void => {
  setArray(array.splice(index, 1));
}

成功例

const deleteFunction  = (index: number): void => {
  // - 配列をコピー
  let newArray: string[] = [ ...array ];
  // - 該当のindexを取り除く
  newArray.splice(index, 1);
  // setStateで更新
  setArray(newArray);
}

もっと簡潔に書く

setStateは関数型の更新ができる
https://ja.reactjs.org/docs/hooks-reference.html#functional-updates

例: prevCountにstateが入りstateが更新された値を返す

<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>

これを応用してprevArrayに元のstate配列が入り更新された配列を返す

const deleteFunction = (index: number): void => {
  setArray(prevArray => prevArray.splice(index, 1));
}