---

---

【React + TypeScript】stateの更新をGenericsとファクトリーメソッドで実装する

投稿日：2021年5月18日

前回の記事でコンポーネント内にstateがオブジェクトの際の汎用的な更新処理をGeneric関数で作成しました。しかし、.tsx内にGeneric関数を記述する場合には問題点もあり記述が汚くなるため、できるだけ書きたくありません。この記事では更に汎用的なコンポーネントごとに使い回せるstate更新のためのファクトリーメソッドを作成してみます。

---

はじめに

この記事について

環境

---

実践

汎用性のために

ファクトリーメソッドの作成

import React from "react";

/**
 * Reactの関数コンポーネントのstateを更新する関数を作成する
 */
export class UpdateStateFactory {
  /**
   * stateのオブジェクトの更新処理をする関数を取得
   * @param updateState useStateで生成される第２引数。
   * @param stateObj 更新対象のオブジェクト。useStateで生成される。
   * @returns
   */
  static getUpdateMethod<T>(
    stateObj: T,
    updateState: React.Dispatch<React.SetStateAction<T>>
  ): <K extends keyof T, V extends T[K]>(key: K, value: V) => void {
    return <K extends keyof T, V extends T[K]>(key: K, value: V) => {
      updateState({ ...stateObj, [key]: value });
    };
  }
}

ファクトリーメソッドをコンポーネントから呼び出し

import React, { useState } from "react";
import { UpdateStateFactory } from "./utils";

interface SimpleObject {
  firstName: string;
  lastName: string;
  age: number;
}

const SimpleObjectComponet = () => {
  // stateを作成
  const [simpleObject, setSimpleObject] = useState<SimpleObject>({
    firstName: "",
    lastName: "",
    age: 0,
  });

  /**
   * SimpleObjectを更新する汎用関数
   * @param key
   * @param value
   */
  const updateSimpleObject = UpdateStateFactory.getUpdateMethod<SimpleObject>(
    simpleObject,
    setSimpleObject
  );

  /**
   * firstNameを更新
   * @param e
   */
  const changeFirstName = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateSimpleObject("firstName", e.target.value);
  };

  // lastNameを変更する関数
  const changeLastName = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateSimpleObject("lastName", e.target.value);
  };

  // ageを変更する関数
  const changeAge = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateSimpleObject("age", Number(e.target.value));
  };

  return (
    <div>
      <p>
        <input
          type="text"
          value={simpleObject.firstName}
          onChange={changeFirstName}
        ></input>
        {simpleObject.firstName}
      </p>
      <p>
        <input
          type="text"
          value={simpleObject.lastName}
          onChange={changeLastName}
        ></input>
        {simpleObject.lastName}
      </p>
      <p>
        <input
          value={simpleObject.age}
          type="number"
          onChange={changeAge}
        ></input>
        {simpleObject.age}
      </p>
    </div>
  );
};

export default SimpleObjectComponet;

---

---

---