オブジェクトのstate管理

複数のステートを1つのグループとしてまとめられる場合は、オブジェクトとしてstate管理するのが一般的です。例えばユーザーのfirstNameとlastName、loginCountなどユーザーのプロパティなので、Userオブジェクトとして管理します。User.tsにてUserオブジェクトの型エイリアスを定義しましょう。定義したら、User型のstateを作成しましょう。useState<User>のように宣言することで、stateの型を定義することができます。

UserDetail.ts◎

import { useState } from "react";

type User = {
  firstName: string;
  lastName: string;
  loginCount: number;
};

export const UserDetail = () => {
  const [user, setUser] = useState<User>({
    firstName: "sample",
    lastName: "太郎",
    loginCount: 0,
  });
...

ここで、userのloginCountのみ増やす関数を作成しましょう。もともとのuser.loginCountに1を足した定数を定義して、setUserの引数にUser型のオブジェクトを渡しますが、firstNameとlastNameは元々のstateの値のままで、loginCountは先ほと定義した定数を格納します。

  const handleLogin = () => {
    const newCount = user.loginCount + 1;
    setUser({
      firstName: user.firstName,
      lastName: user.lastName,
      loginCount: newCount,
    });
  };

上記のように記述した場合、プロパティの数だけ、記述が多くなってしますので、スプレッド構文を利用することで、以下のように特定の値のみ更新することが可能です。

UserDetail.ts◎

...
  const [user, setUser] = useState<User>({
    firstName: "sample",
    lastName: "太郎",
    loginCount: 0,
  });

  const handleLogin = () => {
    const newCount = user.loginCount + 1;
    setUser({
      ...user,
      loginCount: newCount,
    });
  };
...

この関数を呼び出すボタンと、userの情報を表示するようにしましょう。

UserDetail.ts◎

 ...
   return (
    <div>
      <p>{user.firstName} {user.lastName}<p>
      <p>ログイン回数: {user.loginCount} </p>
      <div>
        <button className="btn btn-success" onClick={handleLogin}>
          ログイン
        </button>
      </div>
    </div>
  );
  ...

上記にて、以下のようにログインボタンを押すことで、表示されるカウントが増えるかと思います。