setState React

React: Czy wiesz, że setState jest asynchroniczne?

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!

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę