Renderovanje listi

Renderovanje podataka iz nizova

Recimo da imate sledeću listu.

<ul>
  <li>Creola Katherine Johnson: matematičar</li>
  <li>Mario José Molina-Pasquel Henríquez: hemičar</li>
  <li>Mohammad Abdus Salam: fizičar</li>
  <li>Percy Lavon Julian: hemičar</li>
  <li>Subrahmanyan Chandrasekhar: astrofizičar</li>
</ul>

Jedina razlika u stavkama liste je njihov sadržaj, njihovi podaci. Često ćete imati potrebu da prikažete nekoliko instanci iste komponente sa drugačijim podacima kada pravite interfejse: od liste komentara do galerije profilnih slika. U takvim situacijama, možete čuvati podatke u JavaScript objektima i nizovima i upotrebiti metode kao što su map() i filter() da od njih renderujete listu komponenata.

Evo kratkog primera kako da generišete listu stavki na osnovu niza:

1. Pomerite podatke u niz:

const people = [
  'Creola Katherine Johnson: matematičar',
  'Mario José Molina-Pasquel Henríquez: hemičar',
  'Mohammad Abdus Salam: fizičar',
  'Percy Lavon Julian: hemičar',
  'Subrahmanyan Chandrasekhar: astrofizičar'
];

2. Mapirajte people članove u novi niz JSX čvorova, listItems:

const listItems = people.map(person => <li>{person}</li>);

3. Vratite listItems iz vaše komponente umotano u <ul>:

return <ul>{listItems}</ul>;

Evo rezultata:

Primetite da sandbox iznad prikazuje grešku u konzoli:

Naučićete kako da popravite grešku malo kasnije u ovom članku. Pre toga, hajde da malo strukturiramo podatke.

Filtriranje niza stavki

Ovi podaci mogu dodatno biti strukturirani.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'matematičar',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'hemičar',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'fizičar',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'hemičar',
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrofizičar',
}];

Recimo da želite pronaći način da prikažete samo ljude čija je profesija 'hemičar'. Možete koristiti JavaScript-ovu filter() metodu da vratite samo te ljude. Ova metoda prima niz stavki, propušta ih kroz “test” (funkcija koja vraća true ili false), i vraća novi niz samo onih stavki koje su prošle test (vraćeno je true).

Želite samo stavke gde je profession jednako 'hemičar'. Ta “test” funkcija u ovom slučaju izgleda (person) => person.profession === 'hemičar'. Evo kako to možete uraditi:

1. Napravite novi niz samo “hemičara”, chemists, pozivanjem filter() nad people i filtriranjem person.profession === 'hemičar':

const chemists = people.filter(person =>
  person.profession === 'hemičar'
);

2. Sada mapirajte kroz chemists:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       poznat je zbog {person.accomplishment}
     </p>
  </li>
);

3. Na kraju, vratite listItems iz vaše komponente:

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // Implicitno vraćanje!
);

const listItems = chemists.map(person => { // Vitičasta zagrada
  return <li>...</li>;
});

Čuvanje redosleda stavki u listi sa key

Primetite da svi sandbox-ovi iznad prikazuju grešku u konzoli:

Svakom članu niza morate dodeliti key — string ili broj koji ga jedinstveno identifikuje u tom nizu:

<li key={person.id}>...</li>

Ključevi govore React-u koji član niza odgovara kojoj komponenti, kako bi mogao kasnije da ih poveže. Ovo postaje značajno ako članovi niza mogu da se pomeraju (npr. prilikom sortiranja), ubacuju, ili brišu. Dobro odabran key pomaže React-u da zaključi šta se zapravo dogodilo, kako bi ispravno mogao da ažurira DOM stablo.

Umesto da generišete ključeve u hodu, trebalo bi da ih uključite u vaše podatke:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Gde dobiti key

Različiti izvori podataka pružaju različite ključeve:

• Podaci iz baze podataka: Ako podaci dolaze iz baze podataka, možete koristiti ključeve ili ID-eve iz baze podataka, koji su po prirodi jedinstveni.
• Lokalno generisani podaci: Ako su vam podaci generisani i čuvani lokalno (npr. beleške u aplikaciji za zabeleške), koristite inkrementalni brojač, crypto.randomUUID() ili pakete poput uuid kada kreirate stavke.

Pravila ključeva

• Ključevi moraju biti jedinstveni između „sestrinskih” stavki. Međutim, u redu je koristiti iste ključeve za JSX čvorove u različitim nizovima.
• Ključevi se ne smeju menjati ili će im se svrha obesmisliti! Nemojte ih generisati tokom renderovanja.

Zašto su React-u potrebni ključevi?

Zamislite da fajlovi na vašem desktop-u nemaju imena. Umesto toga, referencirali bi ih po njihovom redosledu — prvi fajl, drugi fajl, i tako dalje. Mogli biste se navići, ali jednom kada obrišete fajl, postalo bi zbunjujuće. Drugi fajl bi postao prvi fajl, treći fajl bi postao drugi fajl, i tako dalje.

Imena fajlova u folderu i JSX ključevi imaju sličnu ulogu. Omogućavaju nam da jedinstveno identifikujemo stavku među „sestrinskim” stavkama. Dobro odabran ključ pruža više informacija od puke pozicije u nizu. Čak iako se pozicija promeni zbog promene redosleda, key omogućava React-u da identifikuje stavku tokom njenog životnog veka.