Débogage d'une clé React instable

السيناريو

Contexte : Une équipe affiche une liste de produits dynamiques issue d'un tableau local. Le Problème : Lors de suppressions d'éléments, l'affichage devient incohérent et certains éléments changent de position de manière inattendue. Contraintes : Vous devez corriger uniquement la gestion des clés dans le rendu de liste. Code actuel : function Products() { const [items] = React.useState([ { id: 1, name: "A" }, { id: 2, name: "B" } ]); return ( <ul> {items.map((item, index) => ( <li key={index}>{item.name}</li> ))} </ul> ); } Livrable attendu : Modifier la clé utilisée afin de garantir un rendu stable et prévisible lors des modifications futures.

المهارات المستهدفة