Listojen renderöinti

Tietojen renderöinti taulukosta

Sanotaan, että sinulla on taulukko sisältöä.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

Ainoa ero taulukon alkioiden välillä on niiden sisältö eli data. Usein täytyy näyttää useita ilmentymiä samasta komponentista eri datalla käyttöliittymiä rakentaesa: kommenttilistoista profiilikuvien gallerioihin. Näissä tilanteissa voit tallentaa datan JavaScriptin olioihin ja taulukoihin käyttämällä metodeja kuten map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) ja filter() renderöidäksesi niistä komponenttilistan.

Tässä lyhyt esimerkki miten luoda kohdelistaus tietojoukosta:

1. Siirrä datat taulukkoon:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

1. Mäppää people kohteet uuteen taulukkoon listItems koostuen JSX:sta:

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

3. Palauta listItems komponentistasi käärittynä <ul> sisään:

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

Tässä lopputulos:

Huomaa hiekkalaatikko yllä, joka näyttää konsolivirheen:

Opit miten tämä virhe korjataan myöhemmin tällä sivulla. Ennen kuin menemme siihen, jäsennetään dataasi hieman.

Taulukon tietojen suodattaminen

Tätä dataa voidaan jäsentää vielä enemmän.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

Sanotaan, että haluat näyttää vain henkilöt joiden ammatti on 'chemist'. Voit käyttää JavaScriptin filter() metodia palauttaaksesi vain ne henkilöt. Tämä metodi ottaa talukon kohteista ja välittää ne “testin” läpi (funktion, joka palauttaa true tai false) ja palauttaa uuden taulukon sisältäen vain ne kohteet jotka läpäisiviät testin (palautti true).

Haluat vain kohteet joissa profession on 'chemist'. Tämä “testaus” funktio tälle näyttäisi seuraavalta (person) => person.profession === 'chemist'. Tässä kuinka se vielä kootaan:

1. Luo uusi taulukko chemists sisältäen vain “chemist” henkilöt kutsumalla filter() metodia people taulukossa suodattaen person.profession === 'chemist':

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

1. Nyt mäppää chemists:

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

1. Lopuksi, palauta listItems komponentistasi:

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

const listItems = chemists.map(person =>
  <li>...</li> // Implisiittinen palautus!
);

const listItems = chemists.map(person => { // Aaltosulje
  return <li>...</li>;
});

Listojen pitäminen järjestyksessä käyttämällä key:ta

Huomaa, että kaikki alla yllä olevat hiekkalaatikot näyttävät virheen konsolissa:

Joudut antamaan jokaiselle taulukon kohteelle key:n — merkkijonon tai numeron joka tunnistaa yksilöllisesti sen muista taulukon kohteista:

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

Avaimet kertovat Reactille mitkä taulukon kohteet vastaavat mitäkin komponenttia, jotta se voi yhdistää ne myöhemmin. Tästä tulee tärkeää jos taulukon kohteet voivat liikkua (esim. suodatuksen seurauksena), kohteita lisätään tai poistetaan. Hyvin valittu key auttaa Reactia päättämään mitä oikeastaan on tapahtunut tehdäkseen oikeat päivitykset DOM-puuhun.

Sen sijaan, että avaimet luotaisiin lennosta, kannattaa sisällyttää ne datassasi:

import { Fragment } from 'react';

// ...

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

Mistä saat key:n

Eri tietolähteet tarjoavat eri lähteet avaimille:

• Data tietokannasta: Jos datasi tulee tietokannasta, voit käyttää tietokannan avaimia/ID:tä, jotka ovat luonnostaan uniikkeja.
• Paikallisesti luotu data: Jos datasi on luotu ja tallennettu paikallisesti (esim. muistiinpanot muistiinpanosovelluksessa), käytä kasvavaa laskuria, crypto.randomUUID():ta, tai a pakettia kuten uuid kohteita luodessa.

Avainten säännöt

• Avainten on oltava uniikkeja sen sisaruksiin nähden. Kuitenkin, on sallittau käyttää samoja avaimia JSX kohteissa eri taulukoissa.
• Avaimet eivät saa muuttua tai se tuhoaa niiden koko tarkoituksen! Älä luo niitä kun renderöidään.

Miksi React tarvitsee avaimia?

Kuvittele, että tiedostoilla työpöydälläsi ei olisi nimiä. Sen sijaan viittaisit niihin niiden järjestyksen perusteella — ensimmäinen tiedosto, toinen tiedosto, ja niin edelleen. Voisit tottua siihen, mutta kun poistat tiedoston niin siitä tulisi sekavaa. Toisesta tiedostosta tulisi ensimmäinen, kolmannesta toinen, ja niin edelleen.

Tiedostonimet kansioissa ja JSX avaimet taulukossa palvelevat samantapaiseen tarkoitukseen. Sen avulla voidaan yksilöidä kohteet sen sisaruksista. Hyvin valittu avain tarjoaa enemmän tietoa kuin pelkän sijainnin taulukossa. Vaikka sijainti muuttuisi uudelleenjärjestyksen seurauksena, key:n avulla React tunnistaa kohteet sen elinkaaren aikana.