1. ホーム
  2. ジャバスクリプト

[解決済み】React Hooks useState()でオブジェクトを使用する。

2022-04-10 18:04:20

質問

ReactでHooksを使用して、ネストされたオブジェクトの状態を更新する正しい方法は何ですか?

export Example = () => {
  const [exampleState, setExampleState] = useState(
  {masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b"
           fieldTwoTwo: "c"
           }
        }
   })

をどのように使用するのでしょうか? setExampleState を更新するために exampleState から a (フィールドを追加する)?

const a = {
masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }
}


b (値を変更する)?

const b = {masterField: {
        fieldOne: "e",
        fieldTwo: {
           fieldTwoOne: "f"
           fieldTwoTwo: "g"
           }
        }
   })

解決方法は?

このように、新しい値を渡すことができます。

  setExampleState({...exampleState,  masterField2: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
   })