【React】useStateで複数の値を管理する方法

Reactで開発を進めている際によく使用するuseState。このuseStateで複数の値を管理する方法をまとめておく。

useStateで複数の値を管理する

const [user, setUser] = useState({
  name: "",
  age: "",
  gender: "",
});

例えば、こんな感じでuserオブジェクトの値を管理したいとしよう。

useStateで値を複数管理したい場合のset関数

以下のコード例では、handleNameという関数を使用しているが、実際に使用するテンプレート部分のコードは割愛する。

だめなコード例

const handleName = (e) => {
  setUser({ name: e.target.value })
};

このコードだと、値の状態を操作することはできるが、userオブジェクトの値のnameというような感じではなく、独立したnameの値に対するものという意味になってしまう。

良いコード例

const handleName = (e) => {
  setUser((prev) => {
    return {
      ...prev,
      name: e.target.value,
    };
  });
};

上記と似ている部分はあるが、set関数の中身をさらに関数にして、スプレッド構文なるものを使用する。そして、このsetUserの引数としてすでに存在しているuserオブジェクトの中身を受け取れるようにする。このようにすれば、すでに存在しているuserの各要素の値を保持しながら、ここのコードのnameを管理することができる。

スプレッド構文

スプレッド構文はこちらに詳しく書いてある

MDN Web Docs

スプレッド構文 - JavaScript | MDN スプレッド (...) 構文を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を目的の場所に展開す...