[React] オブジェクトのstate更新ができない

Question

前提

以下のようなオブジェクトのstateで、stateの中身である「type」を変更して、stateの中身を変更したいと考えています。

  const [item, setItem] = useState({})

  // stateの[type]を変更　(ここでは割愛していますが、セレクトで変更しています)　し、中身を変更する処理
  const handleChangeType = useCallback(
    (e) => {
      const value = e.target.value

      switch (value) {
        case 'a':
          setItem({ type: value, hobby: '' })
        case 'b':
          setItem({ type: value, work: [{ type: '', place: '' }] })
        case 'c':
          setItem({ type: value, hobby: '', option: '' })
        case 'd':
          setItem({ type: value, pet: '' })
        default:
          return
      }
    },
    [item]
  )

発生しているエラー

上記の実装では、typeは変わるが、その他はtype変更前のまま、または一部分だけ（例、"a"に切り替えているのに、petもある）が残ってしまいます。

実現したいこと

現在のセレクトでtypeを変更した際に、setItemのオブジェクトの形にしたい。

Comments

[maisumakun]

> その他はtype変更前のまま、または一部分だけ（例、"a"に切り替えているのに、petもある）が残ってしまいます。

それは、どのような方法で確認しましたか？

[shimokitan]

console.logにてstateのitemを確認しています。

[maisumakun]

console.logはどこに置いていますか？

[shimokitan]

失礼しました。returnの手前に置いています。

Answer 1

switch文でフォールスルー（あるcaseに飛んだあと、breakやreturnで抜けていないので、次のcaseがそのまま実行される）が起きています。

結果、同じ枠内で何度もsetItemが実行されて、どのcaseに飛んでも最後のsetItem({ type: value, pet: '' })が最終結果となってしまいます。

Comments

[shimokitan]

ご指摘の通りでした。有難うございます！