Hvorfor har listepositioner brug for en nøgle, og hvorfor ikke bruge indekset?

Question

Accepted Answer

Når du gengiver en liste, skal React have en måde at vide, **hvilket element er hvilket** mellem gengivelser, så det kan genbruge, omordne, indsætte eller slette DOM-knuder korrekt. **`key`** er denne identitet. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Hvorfor array-indekset er risikabelt At bruge indekset som nøgle fortæller React "elementet på position 0 er det samme element som før" — hvilket bryder i det øjeblik, listen omarrangeres, eller du indsætter/sletter fra fronten: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` Et virkeligt symptom: en liste med inputs, hvor skrivning i én række "springer" til en anden efter sletning/sortering, fordi React gjenbrugte den forkerte `` (og dens interne værdi/fokus). ## Regler - Brug et **stabilt, unikt** id fra dine data (`user.id`, et slug). - Indekset er acceptabelt **kun** for en statisk liste, der aldrig omarrangeres, indsættes eller slettes. - Nøgler skal være unikke blandt **søskende** (ikke globalt). Nøgler er et tip til forsoningsalgoritmen; at få dem rigtigt holder både performance og komponenttilstand korrekt.