Wörter aus einer Datei

Eine Karte ist noch kein Stapel. Die Wörter für den Stapel stehen in der Datei woerter.json, im letzten Tab des Editors: zwölf Objekte, jedes mit einer id, dem englischen Wort in englisch und dem deutschen in deutsch. Die ersten beiden sehen so aus:

[
    { "id": 1, "englisch": "cat", "deutsch": "Katze" },
    { "id": 2, "englisch": "dog", "deutsch": "Hund" },
    …
]

Du lädst sie wie in der Lektion über Effekte: mit fetch() in einem Effekt mit den Abhängigkeiten [], damit er einmal läuft, nachdem App zum ersten Mal erschienen ist. Bis die Wörter da sind, gibt es nichts zu zeigen. Deshalb beginnt der State woerter als null, und solange er es ist, gibt App nur eine Meldung zurück, bevor sie zur Karte kommt:

if (woerter === null) {
    return <p>Wird geladen…</p>;
}

const karte = woerter[0];

Unter der Prüfung sind die Wörter da, und karte ist das erste von ihnen. Seine Eigenschaften gehen als Props an die Karte: <Karteikarte wort={karte.englisch} uebersetzung={karte.deutsch} />.

In der Lektion über Effekte hat ein eigener State, loading, gesagt, ob die Daten noch unterwegs sind. Hier sagt es woerter von selbst: Es ist null, bis die Wörter da sind, und danach ein Array. Einen zweiten State braucht es also nicht.

Und wenn sich die Datei nicht laden lässt? Dann bleibt woerter null, und die App würde für immer Wird geladen… sagen. Besser ist es, zu sagen, was passiert ist: Ein zweiter State, fehler, bekommt eine Meldung, und App zeigt sie. Prüfe ihn vor woerter === null, denn nach einem fehlgeschlagenen Laden stimmen beide.

Typische Fehler:

• useState oder useEffect unter den ifs. React muss bei jedem Rendern dieselben Hooks in derselben Reihenfolge aufrufen, und das vorzeitige return würde sie überspringen. Hooks stehen immer am Anfang der Komponente.
• Das [] am Ende von useEffect weglassen. Der Effekt läuft dann nach jedem Rendern: Er lädt die Wörter, setWoerter() rendert neu, und der Effekt lädt sie wieder, immer wieder.
• woerter[0] über der Prüfung lesen. Das erste Rendern endet dann mit TypeError: Cannot read properties of null (reading '0').