Рэндэрынг спісаў

Рэндэрынг даных з масіваў

Дапусцім, у вас ёсць спіс кантэнту.

<ul>
  <li>Крэола Кэтрын Джонсан: матэматык</li>
  <li>Марыа Хасэ Маліна-Паскель Энрыкес: хімік</li>
  <li>Махамад Абдус Салам: фізік</li>
  <li>Персі Лавон Джуліан: хімік</li>
  <li>Субрахманьян Чандрасекар: астрафізік</li>
</ul>

Адзіная розніца паміж гэтымі пунктамі спісу — іх змест, іх даныя. Пры стварэнні інтэрфейсаў часта трэба паказваць некалькі асобнікаў аднаго і таго ж кампанента, выкарыстоўваючы розныя даныя: ад спісаў каментарыяў да галерэй відарысаў профілю. У такіх сітуацыях вы можаце захоўваць гэтыя даныя ў аб’ектах і масівах JavaScript і выкарыстоўваць такія метады, як map() і filter(), каб рэндэрыць з іх спісы кампанентаў.

Вось кароткі прыклад таго, як стварыць спіс элементаў з масіву:

1. Перамясціце даныя ў масіў:

const people = [
  'Крэола Кэтрын Джонсан: матэматык',
  'Марыа Хасэ Маліна-Паскель Энрыкес: хімік',
  'Махамад Абдус Салам: фізік',
  'Персі Лавон Джуліан: хімік',
  'Субрахманьян Чандрасекар: астрафізік'
];

2. Пераўтварыце элементы масіву people у новы масіў JSX вузлоў — listItems:

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

3. Вярніце listItems з вашага кампанента, абгарнуўшы іх у <ul>:

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

Вось што мусіць атрымацца ў выніку:

Звярніце ўвагу, што ў кансолі пясочніцы адлюстроўваецца памылка:

Вы даведаецеся, як выправіць гэтую памылку пазней на гэтай старонцы. Перш чым перайсці да гэтага, давайце дададзім некаторую структуру да даных.

Фільтрацыя масіваў элементаў

Структуру гэтых даных можна палепшыць.

const people = [{
  id: 0,
  name: 'Крэола Кэтрын Джонсан',
  profession: 'матэматык',
}, {
  id: 1,
  name: 'Марыа Хасэ Маліна-Паскель Энрыкес',
  profession: 'хімік',
}, {
  id: 2,
  name: 'Махамад Абдус Салам',
  profession: 'фізік',
}, {
  id: 3,
  name: 'Персі Лавон Джуліан',
  profession: 'хімік',  
}, {
  id: 4,
  name: 'Субрахманьян Чандрасекар',
  profession: 'астрафізік',
}];

Дапусцім, вы хочаце паказаць толькі людзей, чыя прафесія 'хімік'. Каб вярнуць толькі гэтых людзей, вы можаце выкарыстоўваць JavaScript метад filter(). Гэты метад бярэ масіў элементаў, прапускае іх праз «тэст» (функцыю, якая вяртае true або false) і вяртае новы масіў толькі з тых элементаў, якія прайшлі праверку (вярнулі true).

Нам патрэбны толькі элементы, дзе profession з’яўляецца 'хімік'. Функцыя “тэст” для гэтага выглядае так: (person) => person.profession === 'хімік'. Вось як сабраць гэта ўсё разам:

1. Стварыце новы масіў толькі з «хімікаў» (пераменная chemists) выклікаўшы метад filter() на people для фільтрацыі па person.profession === 'хімік':

const chemists = people.filter(person =>
  person.profession === 'хімік'
);

2. Цяпер пераўтварыце элементы масіву chemists:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession}.
       Галоўнае дасягненне: {person.accomplishment}
     </p>
  </li>
);

3. Нарэшце, вярніце listItems з вашага кампанента:

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

const listItems = chemists.map(person =>
  <li>...</li> // Няяўнае вяртанне!
);

const listItems = chemists.map(person => { // Фігурная дужка
  return <li>...</li>;
});

Захаванне парадку элементаў спісу з дапамогай key

Звярніце ўвагу, што ўсе пясочніцы вышэй паказваюць памылку ў кансолі:

Каб выправіць гэту памылку трэба прысвоіць кожнаму элементу масіву ключ (key) — радок або лік, які адназначна ідэнтыфікуе яго сярод іншых элементаў у гэтым масіве:

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

Ключы паведамляюць React, якому элементу масіву адпавядае кожны кампанент, каб потым ён мог іх супаставіць. Гэта важна, калі элементы масіву могуць перамяшчацца (напрыклад, з-за сартавання), устаўляцца або выдаляцца. Добра падабраны key дапамагае React зразумець, што менавіта адбылося, і зрабіць правільныя абнаўленні ў дрэве DOM.

Замест таго, каб генераваць ключы на хаду, вы павінны ўключыць іх у свае даныя:

import { Fragment } from 'react';

// ...

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

Дзе ўзяць key

Розныя крыніцы даных даюць розныя крыніцы ключоў:

• Даныя з базы даных: Калі вашы даныя прыходзяць з базы даных, вы можаце выкарыстоўваць ключы/ID з базы даных, якія па сваёй прыродзе з’яўляюцца ўнікальнымі.
• Лакальна згенераваныя даныя: Калі вашы даныя згенерыраваны і захоўваюцца лакальна (напрыклад, нататкі ў праграме для вядзення нататак), выкарыстоўвайце інкрэментны лічыльнік crypto.randomUUID() або пакет uuid пры стварэнні элементаў.

Правілы ключоў

• Ключы павінны быць унікальнымі сярод сваіх суседніх элементаў. Аднак, можна выкарыстоўваць аднолькавыя ключы для JSX вузлоў у розных масівах.
• Ключы не павінны мяняцца паколькі гэта пазбаўляе іх сэнсу! Не генеруйце іх падчас рэндэрынгу.

Навошта React патрэбны ключы?

Уявіце, што файлы на вашым працоўным стале не маюць імёнаў. Замест гэтага вы б спасылаліся на іх па парадку - першы файл, другі файл і г.д. Магчыма да гэтага і можна прызвычаіцца, але калі вы выдаліце які-небудзь файл, парадак зменіцца і ўсё стане заблытаным. Другі файл стане першым файлам, трэці файл будзе другім файлам і г.д.

Імёны файлаў у папцы і JSX ключы ў масіве маюць падобную мэту. Яны дазваляюць нам адрозніваць элементы ад іншых элементаў у масіве. Добра падабраны ключ дае больш інфармацыі, чым пазіцыя ў масіве. Нават калі пазіцыя мяняецца з-за змены парадку, key дазваляе React ідэнтыфікаваць элемент на працягу ўсяго яго існавання.