ReactJs - Fetch w funkcji render.

Question

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.

Answer 1

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 :)

Comments

Warto jeszcze dodać, że fetch powinno być wykonane w componentDidMount lub w przypadku hooków useEffect (Druga opcja dużo wygodniejsza)