Reactの配列のstateを操作する

こんにちは。エンジニアの砂町です。
そういえば過去に「未経験から転職してWebシステムを開発した話」という記事を書いたのですが、今月でエンジニア3年目になりました。早すぎ、、
またどこかで今までやってきたことなど記事にできたらいいかなと思っています。

さて、本日はReactの配列のstate操作について話したいと思います。
（自分も初めてReactに触れた時、この内容があまりできなくてstateの操作に手こずった記憶があります。）

Reactでは配列のstateを操作する時、間違った操作の仕方をしてしまうと予期せぬ変更が加わってしまうことがあります。
これにより変更を加えたつもりじゃなくても、stateの値が変更されてしまい、バグが発生します。
「破壊的な操作」は要注意です。

破壊的な操作とは何か？

破壊的な操作は、破壊的メソッドを用いて行われた時に発生します。
例えばstateの配列を追加する場合、下記のpushメソッドを用いた操作は破壊的な操作になります。

const fruits = ['apple', 'banana']
fruits.push('cherry')

stateの配列を追加する場合、は下記のような形でスプレッド構文やconcatメソッドを用いると非破壊的な操作となります。

const fruits = ['apple', 'banana']
const newFruits = [...fruits, 'cherry']

const fruits = ['apple', 'banana']
const newFruits = fruits.concat('cherry')

最後に上記のような操作で行った配列をset関数でstateに反映してあげると完了です。

ちなみに破壊的なメソッドはpushメソッド以外にも「splice / shift」のようなメソッドがあります。
他にも存在するので、stateを操作する時は要注意です。

では下記でもう少し例を見ていきます。

配列のオブジェクトを更新する

下記の例では、idが一致したユーザーの名前を変更するケースを想定したものになります。
ここではmapメソッドを用いて新たな配列を作成しています。
APIのやりとりなどで、よくある場面です。

const users = [
  {
    id:1,
    name:'James',
  },
  {
    id:2,
    name:'Emma',
  },
]

const updateData = {
  id: 2,
  name: 'Sophia'
}

const newUsers = users.map((v)=>{
  if(v.id === updateData.id) return updateData;
    return v;
})

id2のnameの値が「Emma」から「Sophia」に変更できました。
あとはset関数でstateに反映してあげると完了です。

配列のオブジェクトを削除する

最後は、idが一致したユーザーを配列から削除するケースを想定したものになります。
ここではfilterメソッドを用いて新たな配列を作成しています。

  const users = [
    {
      id:1,
      name:'James',
    },
    {
      id:2,
      name:'Emma',
    },
  ]

  const targetId = 1;
  const newUsers = users.filter((v)=> v.id !== targetId)

id1のuserが配列から削除できました。
あとは今まで同様set関数でstateに反映してあげると完了です。