通過「地圖」函數調用密鑰

Question

我收到一個關於陣列中沒有唯一密鑰的每個孩子的警告。

const ITEMS = [ 
    { 
     "name": "blah", displayName: "Blah!" 
     "name": "blah1", displayName: "Blah1!" 
    }, 
    { 
     "name": "blah2", displayName: "Blah2!" 
     "name": "blah3", displayName: "Blah3!" 
    } 
] 

item: function(i) { 
    return (
     <div key={i.name}> 
      <h1>{i.displayName}</h1> 
     </div> 
    ) 
} 

render: function() { 
    return (
     <div> 
      {_.chain(ITEMS).map(this.item, this).value()} # I need to pass in a key here? 
     </div> 
    ) 
} 

我已經在一個月前發佈了一個類似的問題："Each child in an array should have a unique key prop" only on first time render of page。在這種情況下，當它調用item()函數時，我需要通過map傳遞密鑰。我怎樣才能做到這一點？

Answer 1

JavaScript的map傳遞數組的索引作爲map函數的第二個參數。

所以，你應該能夠只是索引添加到item：

item: function(currentValue, idx) { 
    return (
     <div key={currentValue.name + '-' + idx}> 
      <h1>{currentValue.displayName}</h1> 
     </div> 
    ) 
} 

這將確保關鍵是獨特的，穩定的。

在您當前的實施中，i.name可能不是唯一的。在這種情況下，你會從反應中得到警告。

而且，此對象的文字也許不會那麼做您打算什麼：

{ 
    "name": "blah", displayName: "Blah!" 
    "name": "blah1", displayName: "Blah1!" 
} 

鍵，如name中的對象必須是唯一的，你可能會得到未定義的行爲。