独立したステート
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 26/42。
2つのことを記憶する必要がありますか？useState を2回呼び出します。各呼び出しにより、完全に独立した state が作成されます。
const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);cats を更新するとコンポーネントが再レンダリングされますが、dogs の値は変更されません。各ステートには独自のセッターがあり、それらを混同することは初心者が最もよく犯すバグです。setCats(dogs + 1) は問題なくコンパイルされますが、間違いです。
チャレンジ
中級保護施設の受付ボードを運営しましょう。互いに干渉しない2つのカウンターを作成します。
- どちらも初期値 0 の2つの状態
catsとdogsを追加します。 - それらを
id="cats"とid="dogs"内に表示します。 id="add-cat"ボタンは猫を1匹追加し、id="add-dog"ボタンは犬を1匹追加します。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。