Načtení programu

Načítání dat je také práce pro efekt. Aplikace si má o program festivalu říct serveru jednou, když se objeví, takže efekt má závislosti []. Kapely jsou v souboru kapely.json a načtete je pomocí fetch() stejně jako v kurzu JavaScriptu:

useEffect(() => {
    async function nactiKapely() {
        const odpoved = await fetch("kapely.json");
        setKapely(await odpoved.json());
    }
    nactiKapely();
}, []);

Proč ta funkce uvnitř? fetch() potřebuje await a await funguje jen ve funkci označené async. Funkce, kterou dáte useEffect, ale sama async být nemůže: funkce async vždy vrací Promise, ale React čeká, že efekt vrátí buď nic, nebo úklid. Efekt proto vytvoří funkci async a hned ji zavolá.

První vykreslení ukáže prázdný seznam, protože kapely začínají jako []. Za chvíli dorazí data, setKapely() změní stav a React vykreslí seznam s kapelami. Efekt se znovu nespustí: jeho závislosti se nezměnily.

Zatímco uživatel čeká, má mu to stránka říct, a když server odpoví chybou, má říct i to. Obojí jsou jen další stavové proměnné: nacitani je true, dokud nepřijde odpověď, a chyba obsahuje text chybové zprávy, nebo "", když žádná chyba není. Stránka každou z nich ukáže pomocí &&:

{nacitani && <p>Načítám…</p>}
{chyba !== "" && <p className="chyba">{chyba}</p>}

A vzpomeňte si na odpoved.ok z kurzu JavaScriptu: je false, když server odpověděl chybou, třeba 404 Not Found při překlepu v názvu souboru.

Častou chybou je zavolat fetch() přímo v komponentě, bez efektu. Pak každé vykreslení načte data znovu, data změní stav, nový stav se znovu vykreslí… a aplikace se serveru ptá pořád dokola, bez konce.