React.js w przykładach: filtrowanie statycznej listy

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

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

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

> 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.

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 🙂

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.

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

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

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ę?

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

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

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

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

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

[…] React.js w przykładach: filtrowanie statycznej listy […]

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) =>

)

zmieniłem tylko metod handelOnInput następnie:


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


[…] React.js w przykładach: filtrowanie statycznej listy […]

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) ;
});
}


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

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

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?

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?

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
      });
    });
  }

„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ę.