A więc – wiedziałeś?
Prolog
Dla niewtajemniczonych: React zakłada budowanie widoku aplikacji z komponentów. Komponenty z kolei mogą posiadać swój wewnętrzny stan (state). Stan komponentu możesz w nim zmieniać za pomocą metody setState. Więcej podstaw możecie znaleźć tutaj.
Bum!
Niby wszystko jest proste i logiczne, ale… Hola, hola! Metoda setState jest asynchroniczna!
Na przykład!
...
constructor() {
super();
this.state({isVisible: true});
}
...
this.setState({isVisible: false});
console.log(this.state.isVisible);
... Tutaj naprawdopodobniej konsola pokaże Wam true! Czaicie problem?
Nie bądźcie źli, że nie wklejam kodu całego komponentu. Zakładam, że znacie podstawy Reacta. Choć jeśli chcecie kod całego komponentu – piszcie w komentarzach
I co teraz będzie?
Generalnie znam 2 sposoby na poradzenie sobie z problemem.
1. Callback
this.setState({isVisible: false}, function() {
//cokolwiek, co chcecie wykonać po zmianie stanu
console.log(this.state.isVisible);
});I hurra! Działa
2. Metody cyklu życia komponentu: componentWillUpdate lub componentDidUpdate
Te metody uruchamiają się przed i po każdej zmianie stanu. Niby ok, ale owe metody uruchamiają się także przed i po każdej zmianie parametrów (propsów)! A więc bardzo możliwe, że funkcja, która miała planowo zadziałać po zmianie stanu – wywoła się w kilku innych niechcianych przez nas momentach. Trzeba być ostrożnym przy tym podejściu.
Epilog
Brak świadomości asynchroniczności setState przyczynił się już do wielu nieprzespanych nocy programistów całego świata, także… Uświadamiajmy się nawzajem o tej podstępnej pułapce reactowego środowiska. Wymieniłam 2 rozwiązania kłopotu – jeśli znacie inne, piszcie w komentarzach!
