Datan Listojen Renderöinti Reactissa

Nykyaikaisissa verkkosovelluksissa on tavallista renderöidä kokoelmia taustajärjestelmästä saatuja tietoja. Tämän toteuttamiseksi käytämme map()-metodia. map()-metodin sisällä hyödynnämme palautefunktiota ja palautamme JSX:ää halutun lopputuloksen näyttämiseksi.

Tarkastellaan esimerkkiä, joka havainnollistaa toimintaa. Meillä on App-komponentti, joka välittää propin toys, joka on taulukko olioita. ToyCard-komponentti käyttää map()-metodia renderöidäkseen jokaisen lelun taulukosta.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Riveillä 13–15 havaitaan map()-metodin käyttö. Sen avulla voidaan käydä läpi jokainen taulukon alkio, poimia sen arvo ja luoda tietynlaista merkkausta kunkin alkion tietojen perusteella.

Sovelluksen koko koodi:

Jos kuitenkin tarkastelemme konsolia, huomaamme varoituksen: Each child in a list should have a unique "key" prop..

Avain

Avain on olennainen merkkijonoprop, joka täytyy määrittää luotaessa elementtejä kokoelmaan.

React käyttää avaimia varmistaakseen elementtien pysyvän tunnisteen kokoelmassa. Avainten avulla React tunnistaa, mitkä elementit täytyy uudelleenrenderöidä ja luoda uudelleen muutosten yhteydessä sen sijaan, että koko kokoelma luotaisiin uudelleen. Avainten käyttö estää tarpeettoman elementtien uudelleenluonnin, mikä parantaa suorituskykyä.

On suositeltavaa käyttää tunnisteita, kuten backendistä saatuja id-arvoja, key-propeina. Tämä käytäntö mahdollistaa sen, että React tunnistaa ja hallitsee yksittäisiä elementtejä kokoelmassa tehokkaasti.

Korjataan aiempi sovellus käyttämällä key-propeja kohteille:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Rivillä 14: key-prop asetetaan elementille, joka renderöidään useita kertoja tietotaulukon läpi.

Koko sovelluksen koodi: