React Native
keyExtractor
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.
Örnek çözümü göster
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}
/>
);
}
Kendini test et
-
Anahtar türünü davranışına eşle
- item.id
- Benzersiz id ile anahtar
- index.toString()
- Dizin ile anahtar
- keyExtractor
- Anahtar üreten işlev
- benzersiz anahtar
- Öğe takibini sağlar
-
keyExtractor verilmezse ne olur?
<FlatList
data={tasks}
renderItem={...}
/>
- Liste çalışmaz
- Varsayılan dize anahtarı kullanılır ama uyarı verilir
- Uygulama çöker
- Hiçbir şey olmaz
Cevabı göster
Varsayılan dize anahtarı kullanılır ama uyarı verilir — Varsayılan dize anahtarı kullanılır ama konsolda uyarı görülür.
-
keyExtractor gövdesini yaz
keyExtractor={(item) =>____}
Cevabı göster
keyExtractor={(item) =>item.id}
Sıradaki ders: SectionList
