React stateを変更する関数をまとめたい

Question

stateで upperCase、genderCase、groupCaseを管理しています。型は３つともboolean型です。
ON/Offを切り替えるスイッチがあり各スイッチを切り替えるとその各stateを変更する関数が呼ばれてtrueだったらfalseになりfalseだったらtruになります。
3つの関数はstateが違うだけで処理内容は同じです。
この処理を一つの関数にまとめたいのですがうまくいきません。
下記に自分が処理をまとめた関数を書いたのですがうまくいきませんでした。
わかる方がいましたら教えて欲しいです

// 3つの関数を一つにまとめてみた。
// stateを引数としてもらいそのstateを変更するようにしたい。
  const CaseChange = (state: boolean) => {
    if (state) {
      setState({ ...state, state: false });
    } else {
      setState({ ...state, state: true });
    }
  };

interface IState {
  upperCase: boolean;
  genderCase: boolean;
  groupCase: boolean;
}

const [state, setState] = useState<IState>({
  upperCase: false,
  genderCase: false,
  groupCase: false,
});

  const onUpperCaseChange = () => {
    if (state.upperCase) {
      setState({ ...state, upperCase: false });
    } else {
      setState({ ...state, upperCase: true });
    }
  };

  const onGenderCaseChange = () => {
    if (state.genderCase) {
      setState({ ...state, genderCase: false });
    } else {
      setState({ ...state, genderCase: true });
    }
  };

  const onGroupCaseChange = () => {
    if (state.groupCase) {
      setState({ ...state, groupCase: false });
    } else {
      setState({ ...state, groupCase: true });
    }
  };

Answer 1

こんにちは、satodesuさん。

呼び出し元の処理がちょっと見えないので動くかどうか検証しきれませんが、以下のコードでどうでしょうか？

interface IState {
  upperCase: boolean;
  genderCase: boolean;
  groupCase: boolean;
}
type StateKeys = "upperCase" | "genderCase" | "groupCase";

const changeState = useCallback(
  (key: StateKeys) => {
    setState({ ...state, ...{ [key]: !state[key] } });
  },
  [state]
);

// call
changeState('upperCase') // true
changeState('upperCase') // false
changeState('genderCase') // false

Comments

[satodesu]

ありがとうございます！！
なぜuseCallBackを使っているのでしょうか？？
普通の関数ではダメなのでしょうか？

[jtemplej]

>なぜuseCallBackを使っているのでしょうか？？
>普通の関数ではダメなのでしょうか？

だめではないですよー。
ただ上のコードでは`state`の値がキャプチャされてしまい。ずっと同じ値になるはずです。
（ならなかったらすいませんｗ）

なので、`state`が変更された場合でも対応出来るように`useCallBack`を使っただけです。

呼び出し元の状況等にもよるので、あくまでも一例として捉えていただけると助かります。

[satodesu]

<Switch
checked={state.upperState}
onChange={onUpperCaseChange}
/>

[satodesu]

呼び出し元は上記のようになっています。

[satodesu]

ありがとうございます！！
根本的にuseCallbackがどのようなものかが分かっておらずすいません

[jtemplej]

コードありがとうございます！
しばしおまちください。

[whiwhdiw]

親で関数を定義していて子コンポーネンで呼び出している感じです

[jtemplej]

```
const changeState = (key: StateKeys) => () => {
setState({ ...state, ...{ [key]: !state[key] } });
};

<Switch
checked={state.upperState}
onChange={changeState('upperCase')}
/>
```

これでどうでしょうか？

[whiwhdiw]

上記のchangeState関数の中にif文を書いてtrue/falseに書き換えればいいということでしょうか？

[jtemplej]

いえ、changeState関数の引数にそれぞれのkey（upperCase| genderCase| groupCase)を呼び出せば期待した動きになると思います。
以下のような感じです。

<Switch
checked={state.upperState}
onChange={changeState('upperCase')}
/>

<Switch
checked={state.genderCase}
onChange={changeState('genderCase')}
/>

<Switch
checked={state.groupCase}
onChange={changeState('groupCase')}
/>

[satodesu]

いけました。ありがとうございます

Answer 2

コードありがとうございます。

全容わかりました、しばしおまちを。