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

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

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

  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: ["韓国", "中国"] } });

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