はじめに
今回はuseStateで配列を更新する方法について紹介していきます。（個人開発の備忘録も兼ねているので、何か気づいたことがあれば教えていただけると嬉しいです。）
useStateで配列要素の更新を行う場合、pushなどを使用すると再描画が走りません。理由についてはこちらに詳しく解説がありました。
Reactではstateの値が変化した時にコンポーネントが再描画されます。
stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。
そのため、pushなどは使用せずに、新たに配列を作成して保存する必要があります。
追加
配列に要素を追加する場合はスプレット構文を使用します。
const [fruits, setFruits] = useState(['りんご', 'バナナ', 'いちご'])
const addFruits = () => {
setFruits([...fruits, 'ドリアン'])
}
削除
配列の特定の要素を削除したい場合は、filter()を使用して、新たに配列を作成します。
下記の例では、'バナナ'の要素を除いた配列を新たに作成して、stateの値を更新しています。
const [fruits, setFruits] = useState(['りんご', 'バナナ', 'いちご'])
const deleteFruits = () => {
setFruits(
fruits.filter((fruit, index) => (fruit !== 'バナナ'))
)
}
変更
配列の特定の要素を変更したい場合は、map()を使用して、新たに配列を作成します。
下記の例では、indexが2の要素を'ドリアン'に変更した配列を新たに作成して、stateの値を更新しています。
const [fruits, setFruits] = useState(['りんご', 'バナナ', 'いちご'])
const updateFruits = () => {
setFruits(
fruits.map((fruit, index) => (index === 2 ? 'ドリアン' : fruit))
)
}
備考
- filter()の説明
- map()の説明
※どちらも新たに配列を生成していることが重要