(再投稿) React 共通処理でstate変更したい

Question

on/offを切り替えるswitchがあり、切り替えるときにchangeState関数が呼ばれます。
引数として渡されるkeyの中身は{numberState: true}の形で渡されます。
setStateで渡されたstateの値を変えたいのですがうまくいきません。
わかる人がいましたら教えて欲しいです。よろしくお願いします。

interface IState {
  numbers: boolean;
  symbol: boolean;
  texxt: boolean;
}

const index:FC = () => {
  const [state, setState] = useState<IState>();

 const changeState = (key: IState) => {
    console.log(key)
    setState({ ...state, ...{ key: !key }});
  };

 <Switch
  checked={numberState}
  onChange={(e) => changeState({ numbers: e.target.checked })}
 />
 <Switch
  checked={textState}
  onChange={(e) => changeState({ text: e.target.checked })}
 />
 <Switch
  checked={symbolState}
  onChange={(e) => changeState({ symbol: e.target.checked })}
 />

Comments

[fiveHundred]

質問は編集できるので、次からは再投稿はしないでください。

[satodesu]

すいません。　わかりました！

Answer 1

useState で初期値を設定した方がいい気がします。(後述)

  const [state, setState] = useState<IState>();

引数として渡されるkeyの中身は{numberState: true}の形で渡されます。

key という変数名を見たら普通はオブジェクトではなくキー ('numbers', 'symbol', 'text' など) が入ってるものと思うのですが…。
また、key にオブジェクトが入ってるなら setState({ ...state, ...{ key: !key }}); はおかしいです。単純に setState({ ...state, ...key }); で良いのでは。

 const changeState = (key: IState) => {
    console.log(key)
    setState({ ...state, ...{ key: !key }});
  };

numberState などの変数はありませんので、checked には state.numbers などを指定すべきでは。
そして、useState で初期値が指定されてないと state の初期値が undefined なのでエラーになります。

 <Switch
  checked={numberState}
  onChange={(e) => changeState({ numbers: e.target.checked })}
 />

---

Material-UI の Switch をお使いでしたら、e.target からは値を取れないようなので、次のようにする必要があると思います。

 <Switch
  checked={state.numbers}
  onChange={(e) => changeState({ numbers: !state.numbers })}
 />

Comments

[satodesu]

返信ありがとうございます。
setState({ ...state, ...key });にしたのですがswitchのon/offが切り替わらなくなりました。

[hoshi-takanori]

onChange の中で e.target.checked の前に ! をつけたらいいかも。

[satodesu]

変わらなかったです