【React】useStateにてObject / 配列の要素を結合する方法

Javascript

2022.05.20

環境
実現したいこと
解決方法

環境

React 18.0.0

実現したいこと

[
    {
      id: 1,
      content: "フォームでTODOを追加します",
      isDone: false
    },
    {
      id: 2,
      content: "チェックして終了させることができます",
      isDone: true
    }
  ]

javascriptにて使いがちな上記のような配列の中にオブジェクトが入った宣言にて新しくオブジェクトを結合（追加）したいです。

ReactHookにてuseStateを使うことがよくあると思います。

例えば、「const [todo, setTodo] = (“”)」のようにtodoをStringで定義したりすることがあると思います。

これでもいいのですが、「そのTODOは”いつ登録されたものなのか？”」や「タイトル」などTODOに対して付加情報をつけたい時があると思います。

そういうときにそれら全体をTODOとして１つに管理しておくと記述量も減るし、みやすくなると思います。

それを上記のように配列で複数もっておくことでTODOListも作成できたりします。

    {
      id: 3,
      content: "新規で追加したいです！",
      isDone: true
    }

しかし、初期で定義はできたものの、その配列・オブジェクトに上記のような新たなオブジェクトをどう追加するのかって気になりますよね。

そこで今回は配列・オブジェクトに新たなオブジェクトを結合（追加）してあげる方法を紹介していきます

解決方法

useStateにて定義されたセッター関数にて、現時点での配列・オブジェクトの情報を展開してくれる「…」を使用して結合させます。

// object in array
const [todoList, setTodoList] = useState([
    {
      id: 1,
      content: "フォームでTODOを追加します",
      isDone: false
    },
    {
      id: 2,
      content: "チェックして終了させることができます",
      isDone: true
    }
  ]);

setTodoList([
        ...todoList,
        {
          id: todoList.length + 1,
          content: "次にこれを追加します！",
          isDone: false
        }
      ]);
    };

15行目のsetTodoList()の引数に着目してみてください。

「…todoList」を指定していますが、変数に「…」をつけてあげると、その変数を展開して表示してあげることができます。

つまり、todoListにて保持していたid=1,2のオブジェクトと新しいオブジェクトを結合した結果がtodoListに代入されることになります。

「…todoList」を記述せず、setTodoListの引数に新しいオブジェクトのみを記述してしまうと、その値で初期化されてしまいます。

おわり