More than 1 year has passed since last update.

【useState】オブジェクトの中のオブジェクトを更新する

Last updated at 2022-09-25Posted at 2022-07-02

こういったオブジェクトがあるとする

  const [obj, setObj] = useState({
    gender: "男",
    age: 20,
    height: 170,
  });

特定のプロパティを更新する

setObj({ ...obj, gender: "女" });

setObj({  gender: "女" });

こうかくとすべて更新されてしまい、オブジェクトは

{
  gender:"女"
}

となってしまう。
そもそもTypeScriptを使用していれば、エラーをはいてくれると思う。

次にこのようなオブジェクトがあるとする

const [data, setData] = useState({
    title: "国名",
    countries: {
      values: ["日本","アメリカ"]
    }
});

このvaluesの中を更新するには

setData({ ...data, countries: { values: ["韓国", "中国"] } });

さらにネストしていたら、更新関数もネスとさせてやればいい