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

Question

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.

Answer 1

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.

Comments

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ą.

---

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?

---

Chce zatrzymywać operacje, które wykonują się w DidState (np. liczenie długości stringa w state)

---

@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

---

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.

---

Ok. Dziekuję :)

A czy mogę ponownie załadować ten komponent, gdy stan się zaktualizuje?

---

Gdy masz aktualizację state to masz też rerendering więc to Ty decydujesz co kiedy i jak renderujesz.

---

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

})