Trouver la clé dupliquée dans un composant React complexe

Question

J'ai un composant de réaction, qui génère plusieurs clés pendant un certain temps, je ne suis pas sûr de savoir lequel n'est pas unique. L'erreur est comme ci-dessous. Un moyen facile d'aider le débogage? Merci!

react.js: 19500 Avertissement: Chaque enfant dans un tableau ou un itérateur doit avoir un accessoire "clé" unique. Vérifiez la méthode de rendu de MyGrid. Voir https: //fb.me/réac-warning-keys pour plus d'informations.

Answer 1

Ceci est un avertissement que vous n'avez pas attribué une clé, plutôt qu'elle ne l'est pas en réalité unique, la ligne suivante du message devrait vous dire exactement ce que est l'élément incriminé - voir un exemple ci-dessous in div (created by CardsComponent)

warning.js:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `CardsComponent`. See fb.me/react-warning-keys for more information. in div (created by CardsComponent)

Si vous voulez déboguer plus le test est effectué en ReactElementValidator.validateExplicitKey qui fait simplement un chèque si la clé de l'élément étant non nul, aucune vérification de l'unicité parmi les clés frères et soeurs ...

function validateExplicitKey(element, parentType) { 
    if (!element._store || element._store.validated || element.key != null) { 
    return; 
    } 
    // if it gets here it has failed and you will be warned 

La partie intéressante ici étant element.key != null que les autres passent en vertu de déjà été validé