React Stateが変わっているが画面が変わらない

Question

やりたいこと

switchでon/offを切り替えた時にonChange関数が呼ばれます。
データの保存に成功した時にstateの値を書き変えて画面上でswitchをON/OFF切り替えたいのですが
stateの値は書き換わっているのに画面上ではswitchは切り替わっていなく、リロードをすれば切り替わっています。

⑴の関数にしてみたところ画面上でもON/OFF切り替えることはできますが⑵だとリロードしないとON/OFFが切り替わりません。
どうしてなのでしょうか？

⑴
// switch切り替わる
  const onChange = () => {
    setState({ ...state, switch: !state.switch});
  }

⑵
// これだとswitchが切り替わらない

const Required = window.gon.switch;

interface IState {
  switch: boolean;
  message: string;
}

const index:FC = () => {
  const [state, setState] = useState<IState>({
    switch: Required,
    message： ''
  });
  const onChange = () => {
    Axios.post('/user', toJsonBody({
      param: !state.switch,
    }))
  .then(() => {
    setState({ ...state, switch: !state.switch});
    succsessMessage(SAVEMESSSAGE)
  })
  .catch(() => handleError(ERROR));
  }

<Switch
  checked={state.switch}
  onChange={onChange}
/>
```

追記　switchコンポーネントはマテリアルUIを使っています。

Comments

[hoshi-takanori]

Axios.post の結果を確認しましたか？ then の中で console.log してみるとか。

[satodesu]

then()の中の処理は呼べれています

[satodesu]

.catchの処理は呼ばれずthem()の処理が呼ばれています

[hoshi-takanori]

successMessage は何をしてますか？

Answer 1

.thenの中身は非同期実行ですが、stateは呼び出し時点で固定されてしまうので、遅延実行された.thenの中ではsetStateで直接stateを使うような処理はうまく動かないことが考えられます。

setState(state => ({ ...state, switch: !state.switch}))のように、変更関数を渡す形にしてみたらどうなりますでしょうか。

Comments

[satodesu]

const index:FC = () => {
const [state, setState] = useState<IState>({
switch: Required,
message： ''
});
const onChange = () => {
Axios.post('/user', toJsonBody({
param: !state.switch,
}))
.then(() => {
setState(state => ({ ...state, switch: !state.switch}))
succsessMessage(SAVEMESSSAGE)
})
.catch(() => handleError(ERROR));
}

[satodesu]

stateのとこでarameter 'state' implicitly has an 'any' type.というエラーになってしまいます。
上記の書き方であっていますでしょうか？

[maisumakun]

TypeScriptだったんですね…「setState((state: IState) => ({ ...state, switch: !state.switch}))」のように型を明記してみたら解決しますか？

[satodesu]

上記のエラーは解決しましたが結局変割らなかったです

[satodesu]

変わらなかったです