🍨

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

2021/10/02に公開約1,300字

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

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

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を1に変更してくれます

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

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

となるんですね!便利

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

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

Discussion

ログインするとコメントできます