React Hooks + TypeScriptによるUseStateの基礎学習(2)
はじめに
React Hooks + TypeScriptによるUseStateの基礎学習(2)のアウトプットになります。
前回学習したReact Hooks + TypeScriptによるUseStateの基礎学習(1)の続きからになります。
React Hooks + TypeScriptによるUseStateの基礎学習(1)
学習に使用した教材・参考資料
ゴール
以下の映像のようにボタンをクリックすると数字が2づつ増えていきます。
学習手順
useStateの注意点
prevCountの作成
動作確認
1. useStateの注意点
以下の<button>に記述されているonClick内の関数は複数記述することができるが注意が必要です。
同じsetCount(count+1)関数を2つ作成すれば、ボタンをクリックすると2づつ増えると思えるが、実際には1づつ増えていき挙動は変わりません。
# Hello1.tsx
# 変更前
import React, {useState} from 'react';
type Props = {
text: string
}
const Hello1 = (props:Props) => {
const clickHandler = () => {
console.log('clicked')
}
const [count, setCount] = useState(0)
return <div>
<button onClick={() => {setCount(count+1); setCount(count+1);} }>Count {count}</button> //<-- setCount(count+1)を2つ作成
<h1>Hello {props.text} </h1>
<h1>Hello World2</h1>
</div>;
};
export default Hello1;
2. prevCountの作成
クリック毎に2づつ増える、意図した挙動にするにはsetCount関数にアロー関数とprevCountを作成する。
そうするとボタンをクリックする度に2づつ増えていきます。
前回の値に対して1を足す処理になります。
# Hello1.tsx
# 変更後
import React, {useState} from 'react';
type Props = {
text: string
}
const Hello1 = (props:Props) => {
const clickHandler = () => {
console.log('clicked')
}
const [count, setCount] = useState(0)
return <div>
<button onClick={() => {setCount(prevCount=>prevCount+1); setCount(prevCount=>prevCount+1);} }>Count {count}</button> //<-- setCount(prevCount=>prevCount+1)を2つ作成
<h1>Hello {props.text} </h1>
<h1>Hello World2</h1>
</div>;
};
export default Hello1;
3. 動作確認
localhost:3000に接続して動作確認をして以下のようにボタンをクリックして2づつ増えていけば成功です。
おわりに
useStateにおけるsetCountの注意点を学習しました。
次回はuseState(object)です。
この記事が気に入ったらサポートをしてみませんか?