• 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
80 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 (190,700 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 (190,700 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,570 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 (190,700 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 (190,700 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ź 116 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,560 p.)
0 głosów
1 odpowiedź 127 wizyt
pytanie zadane 24 sierpnia 2018 w JavaScript, jQuery, AJAX przez Al3x Użytkownik (870 p.)
0 głosów
1 odpowiedź 70 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

67,017 zapytań

113,930 odpowiedzi

241,411 komentarzy

46,960 pasjonatów

Przeglądających: 148
Pasjonatów: 2 Gości: 146

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.

...