Nowoczesny React: useState dla danych obiektowych

0:00Poprzednie przykłady były stosunkowo proste.

0:02Zarówno tutaj, jak i tutaj mamy do czynienia z typem prostym.

0:06Ten typ prosty jest aktualizowany.

0:08Co jednak, gdybyśmy chcieli tutaj zaznaczać osoby na liście?

0:12Co musimy wziąć pod uwagę?

0:14Zwróć uwagę, że tutaj selected names to object.

0:17Dokładnie jest to array array stringów co prawda, ale chcemy jakoś mieć informację

0:23zwrotną, że coś zostało zaznaczone.

0:26Spróbujmy sobie to przerobić jako właśnie juz state.

0:31I pójdźmy tu sobie na zasadzie takiej, że selected names to będzie ta tablica w

0:37której mamy selectowane imiona i set selected names.

0:41Zgodnie z konwencją możemy to aktualizować, ale teraz

0:45zaktualizujemy całą tablicę.

0:47Jak to zrobić?

0:48Przede wszystkim musimy uzbroić panel block w jakąś metodę, którą

0:54będziemy sobie tutaj przekazywać.

0:55Czyli mówiąc dokładniej chcemy przekazywać funkcję callback, który będziemy

1:00wywoływać tutaj z panel block.

1:02Można sobie wyobrazić, że to będzie on select i tu będzie

1:06proptypes funk jako funkcja.

1:09Zróbmy sobie tak, żeby on select nie był wymagany, czyli nie jest required, tylko

1:14po prostu zrobimy sobie, że on select ma wartość domyślną jako pusty callback.

1:18Zobacz puste arrow function.

1:20Natomiast jeżeli ktoś zrobi onClick tutaj, to chcemy sobie wywołać on select, tak?

1:26Czyli z naszej logiki biznesowej wynika, że my mamy taki callback jak on select.

1:31Natomiast jak gdyby z tego natywnego elementu encore.

1:35Jeżeli ktoś zrobi klika, to my chcemy wywołać ten select, który ktoś przekazał.

1:40Wars case scenario będzie to po prostu pusty select i zobacz, że

1:44ten komponent jest ogłupiony.

1:45Nie ma pojęcia skąd przychodzą te propsy ani dokąd to zmierza.

1:49Czyli kto odbiera to on select.

1:52I dokładnie to podkreślę Ci na sam koniec tego przykładu, ponieważ moglibyśmy sobie

1:56pomyśleć, że przecież zamiast robić tutaj stan, gdzie

2:01będziemy mieli selectowane imiona, można by było tutaj Modyfikować

2:06selected na true false.

2:08To prawda, ale jeżeli modyfikowalibyśmy tutaj true false i nawet to odwracali,

2:12czyli tutaj bazowali na tym typie prostym, to wtedy ten komponent wiedziałby jaki

2:17jest jego wewnętrzny stan, że jest selectowany albo nie, ale nie

2:21wiedzielibyśmy dokładnie co jest selectowane.

2:24No właśnie nie mamy informacji co zostało zaznaczone, a my potrzebujemy tą listę

2:30selectowanych imion, żebyśmy później wiedzieli na podstawie których imion

2:34będziemy chcieli zrobić losowanie.

2:37Więc w takim układzie chcemy, żeby to nam działało, ale stan danych chcemy mieć

2:41tutaj na samej górze, na PeoplePage.

2:44Możesz się spotkać z terminem wznoszenia stanu.

2:48To właśnie byłaby taka sytuacja tutaj, gdybyśmy mieli stan wewnętrzny tego

2:52komponentu, ale przenosimy go do komponentu rodzica, ponieważ komponent

2:57rodzica będzie chciał mieć informację, które konkretnie elementy

3:01zostały zaznaczone.

3:02W takim przypadku mamy tutaj Select i Panel block.

3:05To mogę już zamknąć, A tutaj Przerzucimy sobie onSelect i zróbmy sobie tutaj

3:10funkcję taką jak HandleSelect i to zostanie wywołane w momencie, w

3:15którym klikniemy sobie to OnSelect i chcielibyśmy sobie zobaczyć, co

3:20dokładnie zostanie zaselektowane.

3:22Więc tutaj celowo robię sobie takiego callbacka, żeby tutaj

3:26handleSelect podać name.

3:28Zobacz, że teraz handle select zostanie wywołany z konkretnym nameem i w tym

3:33układzie setSelectedNames możemy uruchomić.

3:37I jedyna rzecz, o której musimy teraz pamiętać to to, że nie chcemy

3:41modyfikować i mutować stanu tego obiektu.

3:44To znaczy nie chcemy użyć tutaj SelectedNames push, bo byłaby to

3:49modyfikacja na zasadzie mutacji danych w tej tablicy.

3:54My chcemy zamiast tego przygotować nową tablicę na podstawie tych selected names,

3:59które już są i tego dodatkowego name.

4:01Czyli tworzymy nową tablicę.

4:03O tym musisz pamiętać, że jeżeli używasz state, to musisz używać Shallow Copy tych

4:09elementów, które chcesz aktualizować.

4:11Jeśli masz do czynienia z typami złożonymi, czyli complex type, chcemy

4:16aktualizować poprzez wrzucenie nowych obiektów.

4:20W tym wypadku powinniśmy mieć możliwość selectowania, ale nie da

4:24się tego deselektować.

4:26Zauważ, że nie jesteśmy w stanie odwrócić tego stanu rzeczy.

4:30Dlaczego?

4:30Dlatego, że powinniśmy najpierw sprawdzić, czy dane imię już jest za selectowane,

4:35czyli selected names includes i tutaj by było name.

4:39Jeżeli tak, to chcemy zrobić troszeczkę inną rzecz, bo chcielibyśmy się pozbyć

4:43wtedy tego name z tych selected names.

4:46Czyli tutaj jeżeli mamy selected name is the name, to chcemy

4:50zrobić set selected names.

4:52Tak jak do tej pory, ale chcielibyśmy odfiltrować, czyli utworzyć nową tablicę

4:56na zasadzie selected name filter i chcemy odfiltrować imię, które tutaj się pojawia.

5:03Czyli imię nie może być takie jak to, co przekazujemy tutaj.

5:07Wtedy tu zostanie utworzona nowa tablica.

5:09Zobacz, że ten filtr z programowania funkcyjnego.

5:12On tworzy nową tablicę, w której nie zostanie przekazane to imię,

5:16którego chcemy się pozbyć.

5:18Teraz tutaj potrzebuję return dlatego, że nie chciałbym, żeby to się wykonało.

5:23Ta część kodu. Jeżeli wpadniemy w tego IFA, Tak.

5:26Możemy tu zastosować składnię if else.

5:28Ja zrobię po prostu if i return w środku ifa, tak żeby ta linia

5:3214 nie została wywołana.

5:34Jeśli ten warunek zostanie spełniony.

5:36I teraz powinniśmy zobaczyć eleganckie zaznaczanie i odznaczanie naszych

5:43elementów, Więc widzimy, że wszystko nam tutaj działa dokładnie

5:46tak, jak byśmy chcieli.

5:47Możemy sobie jeszcze zabrać z tego naszego widoku głównego ten sample button

5:53tutaj, jeżeli go sobie zakomentujemy.

5:55I tutaj.

5:59None use false dla sample buttona.

6:02Zostawmy go sobie tutaj tak, żeby został nam w celach naukowych.

6:06Natomiast widzimy, że tutaj jesteśmy w stanie teraz zaznaczać elementy,

6:10które chcielibyśmy losować.

6:12I tak stan będzie się zachowywał w momencie, w którym chcemy

6:16aktualizować to na obiektach.

6:19Teraz zwróć uwagę na jedną rzecz.

6:21Dostajemy informację zwrotną, czyli na początku możemy mieć niezaselectowane nic,

6:26ale dostajemy informację zwrotną właśnie tutaj co zostaje zaselectowane

6:32poprzez to Select.

6:33A dodatkowo, ponieważ nasz stan mieszka tutaj w PeoplePage, a nie w środku Panel

6:39Blog to panel Blog na podstawie is selected będzie się zaznaczał,

6:43odznaczał, natomiast nie mam pojęcia kto odbiera to on select.

6:48W ten sposób jednocześnie sam nie decyduje o swoim stanie wewnętrznym,

6:52ponieważ decydują o tym props.

6:54Z drugiej strony, jeśli zmieniamy cokolwiek w stanie, czyli tutaj useState,

6:58te nowe propsy zostają przekazane i to jest wyliczane na nowo.

7:03No i trzecia sprawa to jest to, że React sam wie, co powinien zaktualizować w danym

7:08momencie, więc my nie musimy się tym przejmować.

7:11Natomiast mamy tablicę wszystkich zaznaczonych imion, więc wiemy

7:16z czego mamy robić losowanie.