keyExtractor
- React Native kursu
- Başlangıç
- Ders 55/116
- 5 dk
keyExtractor ile benzersiz anahtar öğrenirsin.
keyExtractor
keyExtractor her öğeye benzersiz bir anahtar verir. React Native bu anahtarları öğeleri izlemek için kullanır; liste güncellendiğinde hangi öğenin eklendiğini, silindiğini veya yer değiştirdiğini bu anahtarlarla anlar. İşlev bir öğe alır ve bir dize döndürür.
Örnek: keyExtractor={(item) => item.id}. Burada item.id her görev için benzersizdir; anahtar olarak kullanılır. Benzersiz bir id alanı yoksa (item, index) => index.toString() ile dizin de kullanılabilir; ama bu kalıp listede sıralama değiştiğinde sorun çıkarabilir, bu yüzden id tercih edilir.
id'li anahtarlar
En sağlam anahtar item.id'dir. Bir veri kaynağından gelen öğelerin çoğunda zaten benzersiz bir id alanı bulunur: veritabanı kayıtları, API yanıtları, kullanıcılar, görevler. keyExtractor={(item) => item.id} yazmak yeter.
Dizin (item, index) => index.toString() yaklaşımı sadece sabit listede kabul edilebilir. Liste sıralandığında, filtrelendiğinde ya da öğe eklendiğinde dizinler değişir; React Native yanlış öğeleri güncelleyebilir. Bu yüzden mümkün olduğunda id kullan. Date.now().toString() gibi benzersiz bir değer üretmek de işe yarar.
Uygulama id ile anahtarlanan liste yaz
Boş bileşeni tamamla. users dizisi tanımlı: her nesnenin id ve name alanları var. <FlatList data={users} renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.id} /> döndür.
Başlangıç kodu
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function UserList() {
const users = [
{ id: 'u1', name: 'Ayşe' },
{ id: 'u2', name: 'Ali' }
];
// FlatList ekle
return null;
}Örnek çözüm
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function UserList() {
const users = [
{ id: 'u1', name: 'Ayşe' },
{ id: 'u2', name: 'Ali' }
];
return (
<FlatList
data={users}
renderItem={({ item }) => <Text>{item.name}</Text>}
keyExtractor={(item) => item.id}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Anahtar türünü davranışına eşle
| Kavram | Anlamı |
|---|---|
item.id |
Benzersiz id ile anahtar |
index.toString() |
Dizin ile anahtar |
keyExtractor |
Anahtar üreten işlev |
benzersiz anahtar |
Öğe takibini sağlar |
2 keyExtractor verilmezse ne olur?
<FlatList
data={tasks}
renderItem={...}
/>- Liste çalışmaz
- Varsayılan dize anahtarı kullanılır ama uyarı verilir Doğru cevap
- Uygulama çöker
- Hiçbir şey olmaz
Açıklama: Varsayılan dize anahtarı kullanılır ama konsolda uyarı görülür.
3 keyExtractor gövdesini yaz
keyExtractor={(item) =>____}keyExtractor={(item) =>item.id}Açıklama: item.id her öğe için benzersizdir.