Slovíčka ze souboru

Jedna kartička ještě není balíček. Slovíčka pro balíček jsou v souboru slovicka.json na poslední záložce editoru: dvanáct objektů a každý má id, anglické slovíčko v anglicky a české v cesky. První dva vypadají takhle:

[
    { "id": 1, "anglicky": "cat", "cesky": "kočka" },
    { "id": 2, "anglicky": "dog", "cesky": "pes" },
    …
]

Načtete je stejně jako v lekci Efekty: pomocí fetch() v efektu se závislostmi [], takže se spustí jednou, po prvním vykreslení komponenty App. Dokud slovíčka nepřijdou, není co ukázat. Stav slovicka proto začíná jako null a dokud je null, vrátí App jen zprávu, ještě než se dostane ke kartičce:

if (slovicka === null) {
    return <p>Načítám…</p>;
}

const karticka = slovicka[0];

Pod touto podmínkou už slovíčka jsou a karticka je první z nich. Její vlastnosti dostane kartička jako props: <Karticka slovo={karticka.anglicky} preklad={karticka.cesky} />.

V lekci Efekty říkala, jestli data ještě nedorazila, samostatná stavová proměnná nacitani. Tady to slovicka řeknou sama: dokud slovíčka nedorazí, jsou null, a potom pole. Druhou stavovou proměnnou proto nepotřebujete.

A co když se soubor načíst nepodaří? Pak slovicka zůstane null a aplikace by navždy ukazovala Načítám…. Lepší je říct, co se stalo: druhá stavová proměnná, chyba, dostane zprávu a App ji ukáže. Kontrolujte ji dřív než slovicka === null, protože po nepovedeném načtení platí obojí.

Typické chyby:

• useState nebo useEffect pod podmínkami if. React potřebuje při každém vykreslení zavolat stejné hooky ve stejném pořadí a return v podmínce by je přeskočil. Hooky patří vždycky na začátek komponenty.
• Zapomenuté [] na konci useEffect. Efekt se pak spustí po každém vykreslení: načte slovíčka, setSlovicka() komponentu znovu vykreslí a efekt je načte znovu, pořád dokola.
• slovicka[0] nad podmínkou. První vykreslení pak skončí chybou TypeError: Cannot read properties of null (reading '0').