React 関数を一つにまとめたい

Question

Changeイベントがはしった時に各CaseのChange関数が呼ばれるのですが
値を変更するstateが違うだけで処理内容は全く同じです。なので
onChangeという関数を作り、stateを引数で受け取り、その引数のstateを変えてあげるよう
な関数を作り、使いまわそうとしたのですが
Object literal may only specify known properties, and 't' does not exist in type 'SetStateAction<STate>'.tsというエラーが出てうまくいきません。

わかる人がいましたら教えて欲しいです

enum Type {
  On,
  Off,
}

interface STate {
	Case1: Type;
	Case2: Type;
	Case3: Type;
}


const Index:FC<Props> = () => {
	const [ state, setState ] = useState<STate> ({
	Case1: ChangeType.Off
	Case2: CahngeType.Off
	Case3: CahngeType.Off
	Case4: CahngeType.Off
	});

// const onCase1Cahnge = () => {
//   state.Case1 === Type.On ?
//   setState({ ...state, Case1: Type.On })
//   : setState({ ...state, Case1: Type.Off })
// }

// const onCase2Cahnge = () => {
//   state.Case2 === Type.On ?
//   setState({ ...state, Case2: Type.On })
//   : setState({ ...state, Case2: Type.Off })
// }

// const onCase3ahnge = () => {
//   state.Case3 === Type.On ?
//   setState({ ...state, Case3: Type.On })
//   : setState({ ...state, Case3: Type.Off })
// }

// const onCase4ahnge = () => {
//   state.Case4 === Type.On ?
//   setState({ ...state, Case4: Type.On })
//   : setState({ ...state, Case4: Type.Off })
// }

    const onChange = (t: STate) => {
     t === Type.On ?
     setState({ ...state.t: Type.On })
     : setState({ ...state.t: Type.Off })
    }
}

Comments

[hoshi-takanori]

やりたいことがよく分からないので、onChange を使う部分のコードも貼ってもらえませんか。

[whiwhdiw]

onChangeのコードは一番下のです

[whiwhdiw]

onCase1Cahnge、onCase２Cahnge、onCase3Cahnge、onCase４Cahngeの関数は中で使うstateが使うだけでやっている処理は同じなので一つの関数にまとめたいのです

Answer 1

えっと、添削します。

enum Type {
  On,
  Off,
}

On と Off しかないものをわざわざ enum にする理由がわかりません。boolean でよいのでは。
また、3 種類以上ある場合も、TypeScript では enum よりも単なる値の列挙がいいという説もあります。
参考: [Typescript] enumよりもstring literalがイケてる - Qiita

interface STate {
    Case1: Type;
    Case2: Type;
    Case3: Type;
}


const Index:FC<Props> = () => {
    const [ state, setState ] = useState<STate> ({
    Case1: ChangeType.Off
    Case2: CahngeType.Off
    Case3: CahngeType.Off
    Case4: CahngeType.Off
    });

React のクラスコンポーネントでは State を一つにまとめる必要がありましたが、React Hooks ではまとめる必要はありません。というか、特に理由がなければまとめないのが普通です。その方が効率が良いので。

（STate じゃなくて State では？ とか、Type と CahngeType どっち？ とか、useState の初期地に , が抜けてるとか、interface 定義では Case3 までしかない、とかは置いときます…。）

// const onCase1Cahnge = () => {
//   state.Case1 === Type.On ?
//   setState({ ...state, Case1: Type.On })
//   : setState({ ...state, Case1: Type.Off })
// }

これは例えば次のように使ってるってことですよね？（「使う部分のコード」を聞いたのはこういう意味です。）

  return (
    <div>
      <button onClick={onCase1Cahnge}>{state.Case1}</button>
      <button onClick={onCase2Cahnge}>{state.Case2}</button>
      <button onClick={onCase3Cahnge}>{state.Case3}</button>
    </div>
  );

でしたら、次のように書き換えられると思います。

  const onChange = (key: keyof(STate)) => () => {
    setState({ ...state, [key]: (state[key] === Type.On ? Type.Off : Type.On) });
  };

  return (
    <div>
      <button onClick={onChange('Case1')}>{state.Case1}</button>
      <button onClick={onChange('Case2')}>{state.Case2}</button>
      <button onClick={onChange('Case3')}>{state.Case3}</button>
    </div>
  );

または、

  const cases: (keyof(STate))[] = ['Case1', 'Case2', 'Case3'];

  return (
    <div>
      {cases.map(each =>
        <button key={each} onClick={onChange(each)}>{state[each]}</button>
      )}
    </div>
  );

Comments

[whiwhdiw]

返信ありがとうございます。
そうですね。booleanでやりたいともおます。
buttonをeachで回しているのですがbutton自体は同じdiv要素で囲まれていなくデザインや配置も違います。
eachで回す以外に何か方法ってないのでしょうか？

[whiwhdiw]

const onChange = (key: keyof(STate)) => () => {
上記の書き方なんですが) => () => {　ってなんでアロー関数二回も使っているんですか？

[hoshi-takanori]

onChange は関数を返す関数になってまして、onChange('Case1') は STate の Case1 の値をトグルする関数、onChange('Case2') は Case2 をトグルする関数、…を返します。いわゆるカリー化ってやつですね。
https://qiita.com/KtheS/items/1a93ba0a6d722a534439

「同じdiv要素で囲まれていなくデザインや配置も違う」のであれば map は使えませんし、state を一つにまとめる必要もない気がします。case ごとに useState して、onCase1Cahnge なども作らずに onClick に直接かけば良いのでは。
const [case1, setCase1] = useState(false);
<button value={case1} onClick={() => setCase1(!case1)}>...</button>