Niezależny stan
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 26 z 42.
Musisz pamiętać o dwóch rzeczach? Wywołaj useState dwa razy. Każde wywołanie tworzy całkowicie niezależny element stanu:
const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);Aktualizacja cats powoduje ponowne renderowanie komponentu, ale dogs zachowuje swoją wartość bez zmian. Każdy stan ma własną funkcję ustawiającą, a mylenie ich to najczęstszy błąd początkujących: setCats(dogs + 1) kompiluje się bez problemu, ale nadal jest niepoprawne.
Wyzwanie
ŚredniObsługuj tablicę przyjęć w schronisku: dwa niezależne liczniki.
- Dodaj dwa stany:
catsidogs, oba zaczynające od 0. - Wyświetl je w elementach
id="cats"iid="dogs". - Przycisk
id="add-cat"dodaje jednego kota;id="add-dog"dodaje jednego psa.
Spróbuj swoich sił
<!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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React