Datan Listojen Renderöinti Reactissa

Nykyaikaisissa verkkosovelluksissa on tavallista renderöidä taulukollisia tietoja, jotka saadaan taustajärjestelmästä. Tämän toteuttamiseen käytetään map()-metodia. map()-metodin sisällä hyödynnetään palautefunktiota ja palautetaan JSX, jolla haluttu näkymä renderöidään.

Tarkastellaan esimerkkiä, joka havainnollistaa toimintaa. Meillä on App-komponentti, joka välittää propin toys, joka on olioiden taulukko. ToyCard-komponentti hyödyntää 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 nähdään map()-metodin käyttö. Sen avulla voidaan käydä läpi jokainen taulukon alkio, poimia sen arvo ja luoda yksilöllinen merkkaus kunkin alkion tietojen perusteella.

Jos kuitenkin kiinnitämme huomiota konsoliin, huomaamme varoituksen: Each child in a list should have a unique "key" prop..

Avain

Avain (key) on olennainen merkkijono-ominaisuus, joka täytyy määrittää, kun luodaan 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 backend-datasta saatavia id-arvoja, key-propeina. Tämä käytäntö mahdollistaa sen, että React tunnistaa ja hallitsee yksittäisiä elementtejä kokoelmassa tehokkaasti.

Korjataan aiempi sovelluksemme 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 taulukon datassa.