Wyobraźcie sobie proste zadanie. React. Macie 2 listy. I musicie dorobić funkcjonalność przenoszenia ich elementów pomiędzy owymi listami. Pfffff! A może… niekoniecznie?
W duuuużym uproszczeniu miałam właśnie takie zadanie w pracy. Powiecie: „No ej, co w tym trudnego, marnujesz mój czas”. Ale poczekaj – jeśli A. lubisz uczyć się nowych rzeczy – lub – B. żywisz się cudzą głupotą – zobacz, co popsułam w tym jakże prostym temacie.
Rozwiązanie zadania zaczęłam z petardy. Ot tak, na pewniaka napisałam:
Jak mi sypnęło błędem… this.state.listB.map is not a function Wtf… Przecież to miało działać. No hej. Ojaniemogę. Całe szczęście szybko wpadłam na źródło błędu.
// DO NOT REPEAT AT HOME
this.setState(previousState => ({
listB: previousState.listB.push(movedItem),
}));Ale wiecie co jest najgorsze? Ja już wałkowałam ten temat! O, na przykład tutaj – kiedy dzieliłam się z Tobą żółwią ściągą. Albo tutaj – kiedy tłumaczyłam różnice między .splice i .slice. Sama funkcja setState też już pojawiła się na blogu. Ja nie wiem, czy moje zadżumienie mogę tłumaczyć fazą księżyca, faktem posiadania dziecka, płcią czy poziomem smogu za oknem (choć ten punkt chyba odpada, w Gdańsku powietrze jest raczej spoko). Tak czy siak, mam nadzieję, że ten artykuł oszczędzi podobnego wstydu choć jednej osobie na tej planecie.
A więc do rzeczy. W Javascripcie istnieją funkcje, które:
- zwracają nową wartość mutując istniejące dane ->
.splice(), .push(), .shift(), itd.
Najczęściej używamy ich tak po prostu w łańcuchu wielu funkcji, kiedy tylko mamy na to ochotę i takie postępowanie nie gwałci czytelności kodu. - zwracają nową wartość NIE mutując istniejących danych ->
.slice(), .filter(), .map(), itd.
Najczęściej używamy ich przypisując zwracaną przez nie wartość do nowej zmiennej.
Czy Wy też tak macie, że korzystacie z nich tak jakby – z przyzwyczajenia (żeby nie napisać bezmyślnie)?
Wróćmy do naszego przykładu.
Metoda .filter() działa, ponieważ jej wynik naturalnie przypisujemy do stanu listB. I gitara. Jednak metoda .push() próbuje modyfikować tablicę, na której ma zadziałać (czyli stan listB). A przecież React nie pozwala nam modyfikować stanu w tak oczywisty sposób! Do tego celu udostępnia specjalną funkcję – .setState()…
Oczywistym rozwiązaniem ambarasu jest…
let listB = this.state.listB;
listB.push(movedItem);
this.setState({
listB,
});A wiecie, że tak w ogóle cały pomysł z pushem nie był najlepszy? Istnieje co najmniej jedno fajniejsze rozwiązanie problemu dodawania wartości do reactowego stanu. Jakie? Znajdziecie je w poniższym przykładzie
— the end —
