Unabhängiger State

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 26 von 42.

Müssen Sie sich an zwei Dinge erinnern? Rufen Sie useState zweimal auf. Jeder Aufruf erzeugt ein völlig unabhängiges Stück State:

const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);

Das Aktualisieren von cats rendert die Komponente neu, aber dogs behält seinen Wert unverändert. Jeder State hat seinen eigenen Setter, und diese zu verwechseln ist der häufigste Anfängerfehler: setCats(dogs + 1) kompiliert problemlos und ist trotzdem falsch.

Aufgabe

Mittel

Verwalte die Aufnahmetafel des Tierheims: zwei Zähler, die sich nicht gegenseitig beeinflussen.

Füge zwei States hinzu, cats und dogs, die beide bei 0 beginnen.
Zeige sie in id="cats" und id="dogs" an.
Der id="add-cat"-Button fügt eine Katzen hinzu; id="add-dog" fügt einen Hund hinzu.

Probier es selbst

<!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>