Передача ключа через вызов функции `map`

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. В этом случае мне нужно передать ключ через map, когда он вызывает функцию item(). Как я могу это сделать?

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 в объекте должны быть уникальными или вы можете получить неопределенное поведение.