useStateの配列をfilterを用いて更新する方法
はじめに
以前の記事でuseStateで配列を更新する際にmap
を用いた例を記載していました。
その方法でも問題なく動きはするのですが、filter
を用いたほうがより分岐も少なく、可読性が上がりそうだったのでそちらの処理を備忘録として残します。
サンプルコード
スプレッド構文とfilter関数を用いて以下のような処理を書きます。
// 値を定義 const [value, setValue] = useState([]) // オブジェクト型の配列と仮定しています // filter関数で更新対象の配列を排除し、新たに値を挿入します。 setValue([ ...value.filter((v) => v.Id !== something.Id), something ]);
おわりに
こちらのほうがmapを使った際よりも分岐がなく、パッと見た時の可読性は上がるのかな?と思い、残してみました。 個人的にはこちらの方が分かりやすいです。