通过“地图”函数调用密钥

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中的对象必须是唯一的，你可能会得到未定义的行为。