• 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

0 głosów
75 wizyt
pytanie zadane 23 października 2018 w JavaScript, jQuery, AJAX przez Bakr Mądrala (6,740 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 Mędrzec (186,690 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,740 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 Mędrzec (186,690 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,740 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,590 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 Mędrzec (186,690 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,740 p.)
Ok. Dziekuję :)

A czy mogę ponownie załadować ten komponent, gdy stan się zaktualizuje?
komentarz 24 października 2018 przez Tomek Sochacki Mędrzec (186,690 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,740 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ź 112 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,380 p.)
0 głosów
1 odpowiedź 122 wizyt
pytanie zadane 24 sierpnia 2018 w JavaScript, jQuery, AJAX przez Al3x Użytkownik (850 p.)
0 głosów
1 odpowiedź 66 wizyt
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

65,642 zapytań

112,267 odpowiedzi

236,888 komentarzy

46,640 pasjonatów

Przeglądających: 151
Pasjonatów: 6 Gości: 145

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...