FlatList-data, renderItem og keyExtractor
Videregiv et array til FlatLists data-prop, implementér renderItem, så den returnerer en typograferet række, og angiv en keyExtractor for en stabil identitet for hvert listeelement.
FlatList-data, renderItem og keyExtractor er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvorfor FlatList i stedet for ScrollView?
ScrollView gengiver alle sine underordnede elementer på én gang, hvilket bliver langsomt ved visning af hundredvis af elementer. FlatList virtualiserer listen — den gengiver kun de elementer, der aktuelt er synlige på skærmen, plus en lille buffer. Det reducerer hukommelsesforbruget markant og forbedrer rulleydelsen for store datasæt.
Proppen data
Giv dit array af elementer videre til proppen data. FlatList gennemløber dette array og kalder renderItem for hvert element. Arrayet kan indeholde JavaScript-objekter af enhver type. Ændringer i data-arrayet udløser en ny gengivelse af de berørte listeelementer.
const DATA = [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Bob' },
{ id: '3', name: 'Carol' },
];
<FlatList data={DATA} ... />Proppen renderItem
Proppen renderItem er en funktion, der modtager et objekt med en item-egenskab (det aktuelle element i arrayet) og skal returnere et React-element. Her definerer du, hvordan hver række ser ud. Bevar den som en stabil reference ved hjælp af useCallback for at undgå unødvendige nye gengivelser.
const renderItem = ({ item }) => (
<View style={styles.row}>
<Text>{item.name}</Text>
</View>
);
<FlatList
data={DATA}
renderItem={renderItem}
/>Proppen keyExtractor
keyExtractor fortæller FlatList, hvordan den skal udtrække en entydig strengnøgle fra hvert element. React bruger disse nøgler til at holde styr på, hvilke elementer der blev ændret under nye gengivelser. Uden en korrekt nøgleudtrækker falder FlatList tilbage til arrayets indeks, hvilket kan give svære fejl under ændringer af data.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>Et komplet FlatList-eksempel
Ved at kombinere data, renderItem og keyExtractor får du en fuldt funktionel, rullelig og virtualiseret liste. Du kan style rækkerne i renderItem ligesom enhver anden komponent. FlatList håndterer automatisk rulle- og trykhændelser.
import { FlatList, View, Text, StyleSheet } from 'react-native';
const DATA = [
{ id: '1', title: 'First Item' },
{ id: '2', title: 'Second Item' },
{ id: '3', title: 'Third Item' },
];
export default function App() {
return (
<FlatList
data={DATA}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
)}
/>
);
}
const styles = StyleSheet.create({
item: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
});Tilføjelse af en listeheader og -footer
Brug ListHeaderComponent til at gengive indhold over listen (f.eks. et søgefelt eller en sidetitel) og ListFooterComponent til indhold under listen (f.eks. en indlæsningsindikator, når der hentes flere data). Disse komponenter ruller med listen i modsætning til en view, der er placeret uden for FlatList.
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListHeaderComponent={() => <Text style={styles.header}>Users</Text>}
ListFooterComponent={() => <ActivityIndicator />}
/>Tom liste med ListEmptyComponent
Når data-arrayet er tomt, gengiver FlatList som standard ingenting. Angiv en ListEmptyComponent for at vise en pladsholdertekst eller illustration, når der ikke er nogen elementer. Det er langt renere end at omslutte FlatList i en betingelse.
<FlatList
data={filteredData}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListEmptyComponent={() => (
<Text style={styles.empty}>No results found</Text>
)}
/>Elementseparatorer med ItemSeparatorComponent
I stedet for at tilføje kanttypografier direkte til rækkerne skal du bruge ItemSeparatorComponent til at gengive en separator mellem elementerne. React Native gengiver kun separatoren mellem elementerne, ikke før det første eller efter det sidste, så du undgår dobbelte kanter i enderne.
const Separator = () => (
<View style={{ height: 1, backgroundColor: '#eee' }} />
);
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={Separator}
/>Vandret FlatList
Angiv proppen horizontal til true for at gengive en vandret rulleliste. Det er nyttigt til karruseller, kategorimærker eller historierækker. Proppen showsHorizontalScrollIndicator kan skjule rullebjælken, så udseendet bliver renere.
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={categories}
renderItem={({ item }) => (
<View style={styles.chip}>
<Text>{item.label}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>Programmatisk rulning til et indeks
Brug ref på FlatList, og kald flatListRef.current.scrollToIndex({ index, animated: true }) for at springe til et bestemt element. Du kan også bruge scrollToOffset til kontrol på pixelniveau eller scrollToEnd for at rulle til bunden af listen.
const flatListRef = useRef(null);
const scrollToTop = () => {
flatListRef.current.scrollToIndex({ index: 0, animated: true });
};
<FlatList ref={flatListRef} data={DATA} renderItem={renderItem} />Undgå almindelige FlatList-fejl
Undgå at definere renderItem som en anonym arrow-funktion direkte i JSX (renderItem={() => ...}). Det opretter en ny funktionsreference ved hver gengivelse, så hver række gengives unødvendigt igen. Definér den uden for JSX, eller memoisér den med useCallback. Brug heller aldrig et arrayindeks som nøgle — brug altid et stabilt, entydigt ID.
// Bad: anonymous function in JSX
<FlatList renderItem={({ item }) => <Row item={item} />} />
// Good: stable reference
const renderItem = useCallback(({ item }) => <Row item={item} />, []);
<FlatList renderItem={renderItem} />Hurtig kontrol
Test din forståelse af FlatList-data, renderItem og keyExtractor fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du, at: FlatList virtualiserer store lister ved kun at gengive synlige elementer, renderItem definerer hver rækkes udseende, og keyExtractor leverer stabile, entydige nøgler til effektiv React-afstemning. Nu skal vi se nærmere på træk for at opdatere og uendelig rulning med indlæsning af flere elementer.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “FlatList-data, renderItem og keyExtractor” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “FlatList-data, renderItem og keyExtractor”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “FlatList-data, renderItem og keyExtractor”?
Videregiv et array til FlatLists data-prop, implementér renderItem, så den returnerer en typograferet række, og angiv en keyExtractor for en stabil identitet for hvert listeelement. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “FlatList-data, renderItem og keyExtractor”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- FlatList-data, renderItem og keyExtractor
- Træk for at opdatere og indlæs mere
- SectionList med overskrifter
- Opbygning af en app med kontaktliste