在複雜的React組件中查找重複密鑰

Question

我有一個反應組件，它在一段時間內生成很多密鑰，我不確定哪一個不是唯一的。錯誤如下。任何簡單的方法來幫助調試？謝謝！

react.js：19500警告：數組或迭代器中的每個孩子都應該有一個唯一的「key」屬性。檢查MyGrid的渲染方法。有關更多信息，請參閱https：//fb.me/ react-warning-keys。

Answer 1

這是你還沒有分配的關鍵，而不是它實際上不是唯一的一個警告，該消息的下一行應該告訴你到底是什麼出錯的元素 - 見下文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)

如果您想進一步調試測試在ReactElementValidator.validateExplicitKey簡單地做一個檢查，如果該元素鍵爲非空，兄弟姐妹之間沒有鑰匙的唯一性檢查做...

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 

這裏有趣的部分是element.key != null，因爲其他人已經通過驗證