React.js w przykładach: filtrowanie statycznej listy

[type-of-web-komentarze[bot]]

React.js w przykładach: filtrowanie statycznej listy

W jednym z komentarzy ktoś zasugerował mi, abym pokazywał jak najwięcej praktycznych przykładów. Inna osoba pytała konkretnie o przykład filtrowania listy na podstawie tekstu wpisywanego w input. Stwierdziłem, że warto skorzystać z tych sugestii. Oto powstaje seria wpisów, które będą się przeplatały z kursem Reacta jako takim. Tutaj będę pokazywał…

https://typeofweb.com/react-js-w-przykladach-filtrowanie-statycznej-listy

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jarosław Osmólski		2018-01-24 14:17

Myślę, że od samego początku fajnie byłoby uczyć bindowania poza funkcja render().

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jarosław Osmólski		2018-01-24 16:32

Bo łatwiej zapobiegać niż leczyć :-)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-25 16:22

No może i tak ;) W tak prostych przykładach to nie powinno mieć znaczenia, ale rzeczywiście chyba lepiej od razu uczyć dobrych praktyk.

Sam nie używam bind w ogóle — tylko arrow functions.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-13 03:22

czemu to jest ważne, i gdzie o tym poczytać?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-13 08:48

https://typeofweb.com/2018/02/16/poprawne-bindowanie-funkcji-react-js/

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-13 11:44

dziękuję! świetny artykuł

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Bogucki		2018-01-24 14:25

super.. :) fajnie że taki przykład się pojawia... i że oprócz tematyki nauki React są także przykłady ze świata rzeczywistego... Brawo :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mieszko		2018-01-28 20:13

Z datalist i odpowiednim ''zbindowaniem' do inputa, api przeglądarki filtruje za nas. Można też o tym wspomnieć :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-28 21:22

Tylko że wsparcie dla datalist jest słabe, a jego możliwości bardzo ograniczone ;) To nie kurs HTML5 tylko React :P

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	pwinnicki		2019-07-13 22:07

Wiesz, w Jquery też można i to ekstremalnie prosto ;)

• Jan
• Michał
• Marcin
• Joanna
• Patrycja

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-07-14 10:52

Tylko taki kod to trochę rak :P A datalist jest natywne i wbudowane w przeglądarki.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krystian Kościelniak	http://prokrastynator.pl	2018-01-28 22:38

Pamiętaj o dodaniu unikalnego atrybutu key do każdego elementu zawsze gdy renderowana jest tablica!

Albo pamiętaj o skonfigurowaniu lintera do kodu i pozwól sobie przypominać na bieżąco ;-) Myślę, że warto mówić o dobrych praktykach od razu.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-29 17:25

To przy okazji kolejnych części — bo zaczynamy z CRA :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krystian Kościelniak	http://prokrastynator.pl	2018-01-30 13:06

Okej, sprawdzę Cię :D

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-29 15:04

Myślę, że nie powinno być problematyczne — a jeśli jest to radzę najpierw przerobić jakikolwiek kurs ES, a potem dopiero Reacta :)

const allUsers = ['Michal', 'Kasia', 'Jacek', 'Marta', 'Tomek', 'Ania']; jest zdefiniowane na samej górze kodu na Codepenie (ostatni przykład).

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil Walczak		2018-02-04 22:31

Hej, czy rozwiązanie problemu z ćwiczenia polega na wywołaniu metody filtrującej, a potem dodać then i we wnętrzu tego dopisku przypisać wartość do state-a? To rozwiązanie działa, ale nie wiem czy jest poprawne :) https://uploads.disquscdn.com/images/e915e20395f05d58703b0d3a3add076e8e393c7f4b59954bcb629279972d15f4.png

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-05 10:33

W najprostszej wersji — tak :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Whitcik		2018-02-06 23:51

Myślę, że lepszym rozwiązaniem byłoby w state trzymać text który ma być filtrowany, a na podstawie textu napisać metodę która zwróci prze filtrowane dane w renderze.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-07 01:37

Nie jest to lepszy pomysł :)
W takim przypadku przy każdym wywołaniu render tworzona byłaby nowa tablica z przefiltrowanymi imionami z identyczną zawartością (ale inną referencją!). Miałoby to potencjalnie negatywny wpływ na wydajność — a na pewno jest zupełnie niepotrzebne. Poza tym to też mało przyszłościowe rozwiązanie — dane rzadko są pobierane synchronicznie (patrz ćwiczenie).

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Whitcik		2018-02-06 23:57

Dobra praktyka jest bind owanie w konstruktorze, ponieważ dzięki temu nie jest tworzona za każdym razem nowa funkcja. Wtedy jest twirzona tylko w momencie zamontowania. W tym przypadku nie ma to dużego znaczenia, ale jeśli byłby przekazywany handler do komponentu jako callback za każdym renderem będzie tworzona nowa funkcja, a co za tym idzie nowa referencja, co spowoduje niepotrzebne renderorowanie komponentu jeśli propsy przekazane do komponentu się nie zmieniły i używamy pureCompoent

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-07 01:35

Zrobiłem specjalnie osobny wpis tylko na temat bindowania i czemu robienie tego w funkcji render jest złe. Będzie na dniach

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Bogucki		2018-03-11 13:20

a jak by należało podejść do filtrowania jeżeli byśmy chcieli po kilku elementach
np.
jest lista newsów

i tam będzie title, message, author
i wpisując w jednym polu value wyszuka po każdym z nich

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2019-01-04 11:27

Witam, generalnie kursik bardzo fajny, dopiero co zacząłem zgłębiać temat reacta .. i w tym przykładzie generalnie coś mi umyka ;). Mianowicie, widzę przy załadowaniu skryptu jak się renderuje apka i podpinane są zdarzenia .. i teraz przy evencie input wykonywane jest filtrowanie tablicy, następnie zmiana state apki i ... no właśnie co powoduje wyświetlenie nowej listy? czy zmiana state apki uruchamia ponowny rendering czy czegoś nie łapię?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Każda zmiana state lub props może powodować render.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-01-04 11:27

@Mateuszx:disqus Mateusz W JavaScripcie zapis

{ cos: cos }

to dokładnie to samo co po prostu

{ cos }

:)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mateusz		2019-09-19 17:54

Tak, zupełnie zapomniałem o tym w składni ES 6 :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mariu		2019-01-04 11:27

Czemu const UsersList = ({ users }) ... , a nie const UsersList = (users ) ?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Grzegorz		2019-09-19 17:54

Zobacz lekcję o propsach, tj. 3 czy 4. Tu masz destrukturyzację

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Grzegorz		2019-01-04 11:27

Zajawka problemu "race conditions" : https://medium.com/@slavik57/async-race-conditions-in-javascript-526f6ed80665

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rotarepmi		2019-01-04 11:27

https://codepen.io/Rotarepmi/pen/ERVeWy?editors=0010

Nie jestem pewien czy tutaj rozwiązany jest problem race conditions...

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie jest. Dodatkowo w UsersList zupełnie niepotrzebny jest state — wszak nigdy się on nie zmienia.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Staśkiewicz		2019-01-04 11:27

https://pastebin.com/nRP4wuwe
Dobre rozwiązania do ćwiczenia? :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie. Sprawdzałeś czy działa?
Problem w tym, że na początku Twoje props.users to tablica, a później props.users to Promise — jak, dlaczego?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-13 03:22

Jak ja rozumiem koncepcję React Key, to każdy key w liście ma być unikalny. W wypadku gdy key jest {user} może być powtórka, jeżeli w liście będzie 2 jednakowe imiona. Czy jednak mylę się?
zaproponuję takie rozwiązanie dla map()
users.map((user, userKey) =>

{user}

)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-13 11:04

Oczywiście, ale w tym przypadku nie ma powtórzeń.
Używanie indeksów jako key trochę się mija z celem :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-13 11:35

a jeżeli abstrahować się od przykładu, jaką metodę na generowanie KEY polecasz?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-13 11:53

Unikalne ID generowane po stronie API ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-21 16:55

zmieniłem tylko metod handelOnInput następnie:

handelOnInput(event) { const text = event.currentTarget.value; this.getFilteredUsersForText(text).then(requestResult => { this.setState({ filteredUsers: requestResult.filteredUsers }) }); }

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Parysek		2019-08-05 14:41

Wystarczy skorzystać z funkcji asynchronicznych:

async filterUsers(e) {
const text = e.currentTarget.value;
const filteredUsers = await this.getFilteredUsersForText(text);
this.setState({ filteredUsers });
}

async getFilteredUsersForText(text) {
return new Promise(resolve => {
const time = (Math.random() + 1) * 250;
setTimeout(() => {
const filteredUsers = this.state.allUsers.filter(u => u.toLowerCase().includes(text.toLowerCase()));
resolve(filteredUsers);
}, time) ;
});
}


 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Parysek		2019-08-05 15:26

Ach tak... w tym przypadku lepiej zapomnieć o await, które wstrzyma dalszą część funkcji i obsłużyć Promise w standardowy sposób :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Parysek		2019-08-05 15:26

Ach tak... w tym przypadku lepiej zapomnieć o await, które wstrzyma dalszą część funkcji i obsłużyć Promise w standardowy sposób :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-08-05 16:23

Oba sposoby dadzą jednak błędny rezultat :(

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Parysek		2019-08-05 16:47

Jeśli oba podejścia są błędne, jakie rozwiązanie proponujesz?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-08-05 17:37

Trzeba wziąc pod uwagę to, że odpowiedzi z serwera mogą przychodzić w różnej kolejności i zawsze „zapamiętywać” tylko ostatnie żądanie, albo anulować poprzednie.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	K77		2019-09-19 17:53

Powinienes pokazaz gdzie zdefiniować sobie stałą allUsers :) dla bardzo poczatkujacych moze to być problematyczne.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-19 15:01

Czy celowo nie używasz funkcji strzałkowych przy podłączaniu eventów?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-03-19 15:58

Chodzi Ci o np. onInput={e => this.filterUsers(e)} ? Nie uważam tego za dobrą praktykę.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-20 11:38

oki

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-20 11:11

Zrobiłem listę ale jako 3 komponenty (App, ListItem, Search) jako class. Jak mogę przesłać z dziecka (Search) nowy stan do App? Jest gdzieś już o tym?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-03-20 11:16

https://typeofweb.com/komunikacja-pomiedzy-komponentami-w-react-js/

Akapit pod tytułem "Dziecko ➜ Rodzic: Propsy (callback)"

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz		2020-11-17 13:26

Chciałem zapytać dlaczego jeśli w tabeli z imionami są duble, czyli np kilka razy to samo imię to lista się nie filtruje, a zaczyna dodawać elementy?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz		2020-11-17 14:13

Czy takie rozwiązanie zadania będzie dobre?
Metoda przekazująca props do UserList obsługuje promise.
Reszta bez zmian.

getFilteredUsersForText(text) {
return new Promise(resolve => {
const time = (Math.random() + 1) * 250;
setTimeout(() => {
const filteredUsers = allUser.filter(user => user.toLowerCase().includes(text.toLowerCase()));
resolve(filteredUsers);
}, time) ;
});
}

filteredUsers(e){
const text = e.currentTarget.value;
const filteredUsers = this.getFilteredUsersForText(text);
filteredUsers.then((filteredUsers) =>{
this.setState({
filteredUsers
});
});
}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Norbert		2020-12-05 19:16

"Spróbuj szybko wpisać coś w input. Czy zawsze wyświetlają się poprawne dane? Takie problemy to tzw. race conditions. "

Rozwiązanie koncepcyjne.
W state komponentu app tworzę właściwość, np. requests: []. Do tej tablicy dodaje kolejne obietnice, a właściwość przekazuję jako props do komponentu UsersList.
W komponencie UsersList przetwarzam ostatnią obietnicę w tablicy i na podstawie zwróconych danych generuję listę.

 
 

Komentarz zaimportowany z WordPressa