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

[React] Ładowanie komponentu po załadowaniu stanu z API

VPS Starter Arubacloud
0 głosów
446 wizyt
pytanie zadane 23 października 2018 w JavaScript przez Bakr Mądrala (6,850 p.)

Witam,

 

W jaki sposób wykonać np. ComponentDidMount, dopiero, gdy zostanie pobrany feed z API?

componentWillMount(){
  fetch("https://restcountries.eu/rest/v2/all?fields=name")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        guess: result[0].name
      });
    })
}

Problem polega na tym, że operacje w ComponentDidMount zostają wykonane jeszcze na starym stanie, który jest pustą tablicą, co generuje błędy. Reszta kodu powinna wykonać się dopiero, gdy dane z API zostaną poprawnie pobrane i zapisane do stanu. W tym czasie może być preloader lub opóźnienie.

1 odpowiedź

0 głosów
odpowiedź 23 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Spróbuj tak:

constructor(props) {
    super(props);
    this.state = {
      guess: '',
      isLoading: false,
    };
  }


componentDidMount() {
  this.setState({ isLoading: true });
  fetch("https://restcountries.eu/rest/v2/all?fields=name")
  .then(res => res.json())
  .then(result => {
      this.setState({
        guess: result[0].name,
        isLoading: false,
      });
    })
}

i wtedy w templatce uzależnij wyświetlanie jakiegoś preloadera i contentu w zależności od wartości isLoading.

komentarz 23 października 2018 przez Bakr Mądrala (6,850 p.)
Istnieje możliwość wstrzymania dalszego wykonywania kodu w ComponentDidMount, dopóki nie zostanie wczytany stan?

Wynika, że stan zmienia się dopiero po wykonaniu kolejnych funkcji, które na nim bazują.
komentarz 23 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Nie rozumiem co ty chcesz zrobić... gdy wykona się ten fetch to state zostanie zauktualizowany więc komponent będzie rerenderowany, co Ty chcesz zatrzymywac?
komentarz 23 października 2018 przez Bakr Mądrala (6,850 p.)
Chce zatrzymywać operacje, które wykonują się w DidState (np. liczenie długości stringa w state)
komentarz 23 października 2018 przez k.wichura Pasjonat (19,870 p.)

@Bakr,

render() {
const {twojStanKtoregoJeszczeNieMa}  = this.state;
return(
{twojStanKtoregoJeszczeNieMa && <component />}
)
}

Lub to co podal kolega wyzej. Tylko wtedy renderuejsz loading jak stanu nie ma, a jezeli sie pojawi to docelowy komponent. 

Ps. requesty do api powinny byc wydzielone do osobnego serwisu

komentarz 24 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)
twojStanKtoregoJeszczeNieMa && <component />

Sam jak najbardziej lubię taki styl pisania warunków który ma rację bytu w JS ale trzeba uważać, bo przekonałem się już parę razy, że dla wielu osób mniej doświadczonych taki zapis bywa niezrozumiały.

To nie powód oczywiście aby go unikać :), tak tylko piszę aby być tego swiadomym.

komentarz 24 października 2018 przez Bakr Mądrala (6,850 p.)
Ok. Dziekuję :)

A czy mogę ponownie załadować ten komponent, gdy stan się zaktualizuje?
komentarz 24 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Gdy masz aktualizację state to masz też rerendering więc to Ty decydujesz co kiedy i jak renderujesz.
komentarz 24 października 2018 przez Bakr Mądrala (6,850 p.)
Po aktualizacji powinny wykonać się kolejne operacje zmiany stanu dla kolejnych elementów. Np. jeśli stan 'test1" się zmieni to powinno wykonać się this.setState({

test2: this.state.test1.toUpperCase()

})

Podobne pytania

0 głosów
1 odpowiedź 219 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
1 odpowiedź 288 wizyt
0 głosów
1 odpowiedź 684 wizyt
pytanie zadane 24 sierpnia 2018 w JavaScript przez Al3x Użytkownik (870 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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!

...