useStateで配列を扱う備忘録
はじめに
ReactのuseStateを用いて配列を操作する方法で少しハマったので備忘録として記載します。
push後にDispatchを用いて更新しても反映されない
最初以下のように実装していたのですが、再レンダリングがされず...。
// 値を定義 const [value, setValue] = useState([]) // 配列へ値を挿入 value.push(something); // useStateを介してvalueを更新しているので再レンダリングされるはず...。 setValue(value)
どうやら現在のStateの値を直接変えるのはNGで別の配列を作成して渡すほうが良いとのことでした。
※以下の記事がとても参考になりました!
React の state hook で array を更新しても再描画がされない問題 | gotohayato.com
それでは再レンダリングされる正しい配列への追加
, 更新
, 削除
をそれぞれ記載していくことにします。
配列への値追加
スプレッド構文を用いて以下のように実装します。
// 値を定義 const [value, setValue] = useState([]) // 配列valueへ何かしらの値を追加(something) // これで再レンダリングされます setValue([...value, something]);
配列の値更新
map関数を用いて以下のように実装します。
// 値を定義 const [value, setValue] = useState([]) // オブジェクト型の配列と仮定しています // map関数を用いて新たな配列を生成しますが、それをsetValueで囲みます setValue( value.map((v) => v.Id === something.Id ? something: v ) );
配列の値削除
filter関数を用いて以下のように実装します。
// 値を定義 const [value, setValue] = useState([]) // オブジェクト型の配列と仮定しています // filter関数を用いて削除対象の値を省いた配列を生成します setValue( value.filter((v) => v.Id !== something.Id) );
おわりに
スプレッド構文は今まであまり使う機会がありませんでしたが、これを機にしっかり頭に入れておこうと思います。