• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

ReactJs - Fetch w funkcji render.

Object Storage Arubacloud
0 głosów
442 wizyt
pytanie zadane 21 lipca 2022 w JavaScript przez kubekszklany Gaduła (3,190 p.)

Witam. Chciałem zrobić gui w react'cie, które wyświetlało by panel użytkownika lub formularz logowania, bazując na tym czy użytkownik jest zalogowany czy nie. Jednak nie umiem pobrać tych danych w żaden sposób, bo render nie może być asynchroniczny, a fetch nie może być synchroniczny, przez co poniższy kod nie działa. Wie ktoś jak to rozwiązać?

    render()
    {
        fetch('./api/user/', {method: 'GET',}).then(result =>
        {
            if(Boolean.valueOf(result.text()))
            {
                return this.panel();
            }
            else
            {
                return this.forms();
            }
        });
    }
    
    panel()
    {
        return <h1>User Panel</h1>
    }
    
    forms()
    {
        return <h1>Login / Register</h1>
    }

W tym momencie mam błąd your render method should have a return statement.

1 odpowiedź

+1 głos
odpowiedź 21 lipca 2022 przez rafal.budzis Szeryf (85,260 p.)
musisz wykorzystać stan czyli this.state / setState lub hooka useState. W nim zapisujesz sobie dane. Na start zapisujesz sobie w nim że trwa pobieranie i wtedy w funkcji render wyświetlasz ładny loader. Po pobraniu danych ustawiasz state. Za każdym razem gdy zmieniasz state lub propsy komponent uruchomi funkcje render i pokaże nowe dane na podstawie pobranych :)
komentarz 22 lipca 2022 przez jankustosz1 Nałogowiec (35,940 p.)
Warto jeszcze dodać, że fetch powinno być wykonane w componentDidMount lub w przypadku hooków useEffect (Druga opcja dużo wygodniejsza)

Podobne pytania

0 głosów
0 odpowiedzi 83 wizyt
pytanie zadane 7 września 2022 w JavaScript przez castor_fiber Użytkownik (800 p.)
0 głosów
1 odpowiedź 539 wizyt
pytanie zadane 29 kwietnia 2021 w JavaScript przez rszczepanski02 Obywatel (1,180 p.)
+1 głos
1 odpowiedź 357 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

92,689 zapytań

141,601 odpowiedzi

320,094 komentarzy

62,048 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...