Ku-render Orodha

Ku-render data kutoka kwenye arrays

Tuseme una orodha ya maudhui.

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

Tofauti pekee kati ya vipengele hivyo vya orodha ni maudhui yao, data yao. Mara nyingi utahitaji kuonyesha nakala kadhaa za component ileile ukitumia data tofauti wakati unajenga violesura: kutoka orodha za maoni hadi maghala ya picha za profaili. Katika hali hizi, unaweza kuhifadhi data hiyo katika objects na arrays za JavaScript na kutumia mbinu kama map() na filter() ili ku-render orodha za components kutoka humo.

Huu hapa ni mfano mfupi wa jinsi ya kuzalisha orodha ya vipengele kutoka kwenye array:

1. Hamisha data hiyo kwenye array:

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

2. Map wanachama wa people kuwa array mpya ya vipengele vya JSX, listItems:

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

3. Rudisha listItems kutoka kwenye component yako ikiwa imefungwa ndani ya <ul>:

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

Huu hapa ni matokeo:

Angalia kuwa sanduku la mchanga (sandbox) hapo juu linaonyesha hitilafu ya console:

Utajifunza jinsi ya kurekebisha hitilafu hii baadaye kwenye ukurasa huu. Kabla hatujafika hapo, hebu tuongeze muundo fulani kwenye data yako.

Kuchuja arrays za vipengele

Data hii inaweza kupangwa kwa muundo zaidi.

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',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

Tuseme unataka njia ya kuonyesha watu tu ambao taaluma yao ni 'chemist'. Unaweza kutumia mbinu ya filter() ya JavaScript kurudisha watu hao tu. Mbinu hii huchukua array ya vipengele, huvipitisha kupitia “jaribio” (function inayorudisha true au false), na hurudisha array mpya ya vipengele vile tu vilivyofaulu jaribio (vilivyorudisha true).

Unataka tu vile vipengele ambavyo profession yake ni 'chemist'. Function ya “jaribio” ya hili inaonekana kama (person) => person.profession === 'chemist'. Hivi ndivyo ya kuiunganisha pamoja:

1. Tengeneza array mpya ya watu “chemist” tu, chemists, kwa kuita filter() kwenye people ukichuja kwa person.profession === 'chemist':

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

2. Sasa map juu ya chemists:

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

3. Mwisho, rudisha listItems kutoka kwenye component yako:

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

const listItems = chemists.map(person =>
  <li>...</li> // Kurudisha kwa siri!
);

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

Kuweka vipengele vya orodha katika mpangilio kwa key

Angalia kuwa masanduku yote ya mchanga hapo juu yanaonyesha hitilafu kwenye console:

Unahitaji kumpa kila kipengele cha array key — mfululizo wa herufi au nambari inayokitambulisha kwa upekee miongoni mwa vipengele vingine katika array hiyo:

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

Keys huiambia React ni kipengele kipi cha array kila component kinacholingana nacho, ili iweze kuzilinganisha baadaye. Hili huwa muhimu ikiwa vipengele vya array yako vinaweza kuhama (mfano kutokana na kupanga), kuingizwa, au kufutwa. key iliyochaguliwa vizuri humsaidia React kubaini kwa hakika kilichotokea, na kufanya masasisho sahihi kwenye mti (tree) wa DOM.

Badala ya kuzalisha keys papo hapo, unapaswa kuzijumuisha ndani ya data yako:

import { Fragment } from 'react';

// ...

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

Wapi pa kupata key yako

Vyanzo tofauti vya data hutoa vyanzo tofauti vya keys:

• Data kutoka kwenye database: Ikiwa data yako inatoka kwenye database, unaweza kutumia keys/IDs za database, ambazo ni za kipekee kwa asili yake.
• Data iliyozalishwa kienyeji: Ikiwa data yako imezalishwa na kuhifadhiwa kienyeji (mfano madokezo katika programu ya kuchukua madokezo), tumia kihesabu kinachoongezeka, crypto.randomUUID() au kifurushi kama uuid wakati wa kutengeneza vipengele.

Kanuni za keys

• Keys lazima ziwe za kipekee miongoni mwa ndugu. Hata hivyo, ni sawa kutumia keys zilezile kwa nodi za JSX katika arrays tofauti.
• Keys hazipaswi kubadilika ama hilo linaharibu kusudi lao! Usizizalishe wakati wa ku-render.

Kwa nini React inahitaji keys?

Fikiria kwamba faili kwenye desktop yako hazikuwa na majina. Badala yake, ungezirejelea kwa mpangilio wao — faili ya kwanza, faili ya pili, na kadhalika. Ungeweza kuzoea, lakini mara tu unapofuta faili, ingekuwa jambo la kutatanisha. Faili ya pili ingekuwa faili ya kwanza, faili ya tatu ingekuwa faili ya pili, na kadhalika.

Majina ya faili katika folda na keys za JSX katika array hutimiza kusudi linalofanana. Hutuwezesha kukitambulisha kipengele kwa upekee kati ya ndugu zake. key iliyochaguliwa vizuri hutoa taarifa zaidi kuliko nafasi ndani ya array. Hata kama nafasi itabadilika kutokana na kupanga upya, key humwezesha React kukitambua kipengele katika maisha yake yote.