useStateについて/オブジェクトの一部を変更した値をsetしたいとき

useStateを使う時

const [haagenDazsBox, setHaagenDazsBox] = useState<haagenDazsBoxProps>(haagendaszBoxIni)

setHaagenDazsBox("ichigo")
console.log(haagenDazsBox)
//出力結果: "ichigo"

というかんじで使うと思うのですが
useStateのuse●●の引数は元々state(ここではhaagenDazsBox）を引数にもった関数が省略されたものらしくて

setHaagenDazsBox(state => {
	return{
		...state
	}
})

こうすることによって
setHaagenDazsBoxにhaagenDazsBoxをセットしたとこになります

新しい state が前の state に基づいて計算される場合は、setState に関数を渡すことができます。
https://ja.reactjs.org/docs/hooks-reference.html

なのでたとえば　
ハーゲンダッツが箱にイチゴ２個、抹茶２個、バニラ２個入ってる初期値をセットして

const haagenDazsBoxInitialData = {
	"ichigo": 2,
	"macha": 2,
	"vanilla": 2
}

const [haagenDazsBox, setHaagenDazsBox] = useState<haagenDazsBoxProps>(haagenDazsBoxInitialData)

抹茶一つ食べたよ〜(残り一個）ってのを変更したい場合は

setHaagenDazsBox(state => {
	return{
		...state,
		"macha":1
	}
}

とすると、

console.log(haagenDazsBox)
//出力結果:
	{
		"ichigo": 2,
		"macha": 1,
		"vanilla": 2
	}

と、すでにある抹茶プロパティの2を１に変更してくれます

チョコを追加で２個いれたいですというときは

setHaagenDazsBox(state => {
	return{
		...state,
		"chocolate":2
	}
}

console.log(haagenDazsBox)
//出力結果:
	{
		"ichigo": 2,
		"macha": 2,
		"vanilla": 2,
		"chocolate":2
	}

となるんですね！便利

ちなみに
return を省略したいときは丸括弧を追加すると省略可能です

setHaagenDazsBox(state => （{
		...state,
		"chocolate":2
	}）