数组或迭代器中的每个子节点都应该具有唯一的“键”。支柱 [英] Each child in an array or iterator should have a unique "key" prop
问题描述
收到警告消息()使用react.js在下面的代码中。我检查了stackoverflow上的答案,并尝试删除警告消息,但它没有帮助。
在静态页面中创建一个具有类似功能的单独示例,它工作正常。但是,这段代码正在抛出警告信息。如何删除此警告消息?
was getting the warning message () in the below code using react.js. I checked answers on the stackoverflow and tried to remove the warning message but it didn't help. Made a separate example with similar functionality in a static page and it is working fine. But, this code is throwing warning message. How to remove this warning message ?
<tbody>
{list.map(function(value){
return(<tr className="gradeA" role="row">
<td className="sorting_1">{ value.id }</td>
<td>{value.name}</td>
<td>{value.location}</td>
</tr>);
})
}
</tbody>
推荐答案
您只需要在返回时添加一个唯一的密钥来自地图的组件。在你的map函数中,接收另一个参数作为键,并为你返回的每个 tr
添加 key = {key}
作为道具。
You just need to add a unique key to the returned component from map. In your map function receive define another parameter as key and for each tr
that you return just add key={key}
as a prop.
<tbody>
{list.map(function(value, key){
return(<tr className="gradeA" role="row" key={key}>
<td className="sorting_1">{ value.id }</td>
<td>{value.name}</td>
<td>{value.location}</td>
</tr>);
})
}
</tbody>
这篇关于数组或迭代器中的每个子节点都应该具有唯一的“键”。支柱的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!