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

ReactJs - Fetch w funkcji render.

VPS Starter Arubacloud
0 głosów
389 wizyt
pytanie zadane 21 lipca 2022 w JavaScript przez kubekszklany Gaduła (3,170 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,880 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 77 wizyt
pytanie zadane 7 września 2022 w JavaScript przez castor_fiber Użytkownik (800 p.)
0 głosów
1 odpowiedź 442 wizyt
pytanie zadane 29 kwietnia 2021 w JavaScript przez rszczepanski02 Obywatel (1,180 p.)
+1 głos
1 odpowiedź 330 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...