ReactDərs 9 / 15

Siyahıları göstərmək

Massivdən komponentlərə

map hər məlumat elementini JSX elementinə çevirir. React eyni valideyndəki elementlərin kimliyini key vasitəsilə izləyir. Məlumatdan gələn sabit, unikal ID seç; render zamanı təsadüfi key yaratma.

import { useState } from 'react';
export default function Employees({ employees }) {
  const [query, setQuery] = useState('');
  const visible = employees.filter(employee =>
    employee.name.toLocaleLowerCase('az').includes(query.toLocaleLowerCase('az'))
  );
  return <section>
    <label htmlFor="search">Ad üzrə axtar</label>
    <input id="search" value={query} onChange={event => setQuery(event.target.value)} />
    {visible.length ? <ul>{visible.map(employee =>
      <li key={employee.id}>{employee.name} — {employee.department}</li>
    )}</ul> : <p>Uyğun işçi tapılmadı.</p>}
  </section>;
}

Nümunə

Filtri törəmə məlumat kimi hesabla

Görünən siyahını query və ilkin məlumatdan hesablamaq olursa ayrıca state-də saxlayıb sinxronlaşdırmağa ehtiyac yoxdur. Əks halda iki həqiqət mənbəyi yarana bilər. Eyni ad daşıyan işçilər mümkündür; buna görə ad hər zaman uyğun key deyil.

Element əlavə/silmə və sıralama varsa indeks key-i elementin yerli state-ni səhv kimliyə bağlaya bilər. Key map-in birbaşa qaytardığı elementdə olmalıdır. Ayrıca komponentə lazım olan ID-ni adi prop kimi də ötür; key onun props obyektinə daxil olmur.

Əlavə qeydlər və mənbələr

Massivi map ilə komponentlərə çevir və sabit məlumat ID-sini key kimi ver. Axtarış dəyərini state-də saxla, nəticəni filter ilə hesabla və elementlərin sırası dəyişəndə kimliyini qoru.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

map və komponent siyahısı
Sabit key və element kimliyi
Axtarış və filtrləmə

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Siyahıda axtar

Sorğunu dəyiş və görünən siyahının ilkin məlumatdan hesablandığını gör.

AdlarAxtarış

Hədəf: Axtarışa Ay yaz.

Canlı nəticə

Giriş"Aysel""Murad""Leyla""Ali"

Nəticə"Aysel""Murad""Leyla""Ali"

Mənbə kodu

names.filter(name => name.toLocaleLowerCase('az').includes("".toLocaleLowerCase('az')))

Özün sına

İşçilər siyahısı və ad üzrə axtarış yarat. Eyni adlı iki işçini fərqli ID ilə saxla və uyğun nəticə olmadıqda mesaj göstər.

Nəticəni necə yoxlayım?

Axtarış düzgün süzür, eyni adlı fərqli ID-li işçilər qorunur və key xəbərdarlığı yoxdur.

Gözlənilən nəticə

Aysel yazılanda iki ayrı ID-li sətir qalır.
Uyğun olmayan axtarış İşçi tapılmadı mesajını göstərir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Eyni ad kimlik deyil: iki Ayselin ID-si fərqlidir. Axtarış locale-aware kiçik hərflərlə aparılır.

App.jsx

import { useState } from 'react';
const staff = [{ id: 1, name: 'Aysel' }, { id: 2, name: 'Aysel' }, { id: 3, name: 'Murad' }];
export default function App() {
  const [query, setQuery] = useState('');
  const results = staff.filter(person => person.name.toLocaleLowerCase('az').includes(query.toLocaleLowerCase('az')));
  return <><label>Axtar<input value={query} onChange={event => setQuery(event.target.value)} /></label>
    {results.length ? <ul>{results.map(person => <li key={person.id}>{person.name} (ID: {person.id})</li>)}</ul> : <p>İşçi tapılmadı.</p>}</>;
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.