我正在构建一个React组件，它接受JSON数据源并创建一个可排序的表。 每个动态数据行都有一个分配给它的唯一键，但我仍然收到以下错误：
数组中的每个子节点都应该具有唯一的“键”支柱。 检查TableComponent的render方法。
我的TableComponent渲染方法返回：
<table>
<thead key="thead">
<TableHeader columns={columnNames}/>
</thead>
<tbody key="tbody">
{ rows }
</tbody>
</table>
TableHeader组件是单行，并且还具有分配给它的唯一键。
row中的每个rows都是使用具有唯一键的组件构建的：
<TableRowItem key={item.id} data={item} columns={columnNames}/>
而TableRowItem看起来像这样：
var TableRowItem = React.createClass({
render: function() {
var td = function() {
return this.props.columns.map(function(c) {
return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
}, this);
}.bind(this);
return (
<tr>{ td(this.props.item) }</tr>
)
}
});
是什么导致了唯一的关键道具错误？
您应该为每个孩子以及孩子中的每个元素添加一个键。
这样React可以处理最小的DOM更改。
在你的代码中，每个<TableRowItem key={item.id} data={item} columns={columnNames}/>都试图在没有密钥的情况下在其中呈现一些孩子。
检查this example。
尝试从div中的key={i}元素中删除<b></b>（并检查控制台）。
在示例中，如果我们不给<b>元素的键，并且我们只想更新object.city，则React需要重新渲染整行而不仅仅是元素。
这是代码：
var data = [{name:'Jhon', age:28, city:'HO'},
{name:'Onhj', age:82, city:'HN'},
{name:'Nohj', age:41, city:'IT'}
];
var Hello = React.createClass({
render: function() {
var _data = this.props.info;
console.log(_data);
return(
<div>
{_data.map(function(object, i){
return <div className={"row"} key={i}>
{[ object.name ,
// remove the key
<b className="fosfo" key={i}> {object.city} </b> ,
object.age
]}
</div>;
})}
</div>
);
}
});
React.render(<Hello info={data} />, document.body);
@Chris在底部发布的答案比这个答案更详细。请看看https://stackoverflow.com/a/43892905/2325522
关于密钥在和解中的重要性的反馈文档：Keys
迭代数组时要小心！
一种常见的误解是，使用数组中元素的索引是一种可以接受的方法来抑制您可能熟悉的错误：
Each child in an array should have a unique "key" prop.
但是，在许多情况下它不是！这种反模式在某些情况下会导致不必要的行为。
key propReact使用key prop来理解组件到DOM元素的关系，然后将其用于reconciliation process。因此，密钥始终保持唯一非常重要，否则React很有可能会混淆元素并改变不正确的元素。同样重要的是，这些键在所有重新渲染中保持静态，以保持最佳性能。
话虽如此，只要知道阵列是完全静态的，就不一定需要应用上述内容。但是，尽可能鼓励应用最佳实践。
React开发人员在this GitHub issue中说：
- 关键不在于性能，而是关于身份（这反过来会带来更好的性能）。随机分配和更改的值不是标识
- 我们无法在不知道您的数据建模方式的情况下[自动]实际提供密钥。如果你没有id，我建议使用某种散列函数
- 我们在使用数组时已经有了内部键，但它们是数组中的索引。插入新元素时，这些键是错误的。
简而言之，key应该是：
key prop根据上述说明，仔细研究以下样本，并尽可能尝试实施推荐的方法。
<tbody>
{rows.map((row, i) => {
return <ObjectRow key={i} />;
})}
</tbody>
这可以说是在React中迭代数组时最常见的错误。这种方法在技术上并非“错误”，如果您不知道自己在做什么，那只会......“危险”。如果您正在迭代静态数组，那么这是一种非常有效的方法（例如导航菜单中的链接数组）。但是，如果要添加，删除，重新排序或过滤项目，则需要小心。在官方文档中查看此detailed explanation。
class MyApp extends React.Component {
constructor() {
super();
this.state = {
arr: ["Item 1"]
}
}
click = () => {
this.setState({
arr: ['Item ' + (this.state.arr.length+1)].concat(this.state.arr),
});
}
render() {
return(
<div>
<button onClick={this.click}>Add</button>
<ul>
{this.state.arr.map(
(item, i) => <Item key={i} text={"Item " + i}>{item + " "}</Item>
)}
</ul>
</div>
);
}
}
const Item = (props) => {
return (
<li>
<label>{props.children}</label>
<input value={props.text} />
</li>
);
}
ReactDOM.render(<MyApp />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>在这个片段中，我们使用的是非静态数组，我们并不限制自己将它用作堆栈。这是一种不安全的方法（你会明白为什么）。请注意，当我们将数组添加到数组的开头（基本上是非移位）时，每个<input>的值仍然存在。为什么？因为key没有唯一标识每个项目。
换句话说，起初Item 1有key={0}。当我们添加第二个项目时，顶部项目变为Item 2，然后是Item 1作为第二个项目。然而，现在Item 1已经有key={1}而不是key={0}了。相反，Item 2现在有key={0} !!
因此，React认为<input>元素没有改变，因为Item与关键0总是在顶部！
那么为什么这种方法有时候只是坏事呢？
如果以某种方式过滤，重新排列或添加/删除项目，则此方法仅有风险。如果它总是静止的，那么使用它是完全安全的。例如，像["Home", "Products", "Contact us"]这样的导航菜单可以安全地使用此方法进行迭代，因为您可能永远不会添加新链接或重新排列它们。
简而言之，这时您可以安全地将索引用作key：
如果我们改为，在上面的代码片段中，将添加的项目推送到数组的末尾，每个现有项目的顺序始终是正确的。
<tbody>
{rows.map((row) => {
return <ObjectRow key={Math.random()} />;
})}
</tbody>
虽然这种方法可能会保证密钥的唯一性，但它总是会强制响应重新呈现列表中的每个项目，即使这不是必需的。这是一个非常糟糕的解决方案，因为它会极大地影更不用说在Math.random()产生两次相同数字的情况下，不能排除发生密钥冲突的可能性。
不稳定的密钥（如
Math.random()生成的密钥）将导致许多组件实例和DOM节点被不必要地重新创建，这可能导致性能下降和子组件中的状态丢失。
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uniqueId} />;
})}
</tbody>
这可以说是best approach，因为它使用了数据集中每个项目唯一的属性。例如，如果rows包含从数据库获取的数据，则可以使用表的主键（通常是自动递增的数字）。
选择密钥的最佳方法是使用在其兄弟姐妹中唯一标识列表项的字符串。大多数情况下，您会使用数据中的ID作为键
componentWillMount() {
let rows = this.props.rows.map(item => {
return {uid: SomeLibrary.generateUniqueID(), value: item};
});
}
...
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uid} />;
})}
</tbody>
这也是一个很好的方法。如果您的数据集不包含任何保证唯一性的数据（例如，任意数字的数组），则可能存在键冲突。在这种情况下，最好在迭代数据集之前为数据集中的每个项目手动生成唯一标识符。优选地，在安装组件时或者在接收数据集时（例如，从props或从异步API调用），为了仅执行一次，而不是每次重新呈现组件。已经有一些库可以为您提供这样的密钥。这是一个例子：react-key-index。
我发现最简单的解决方案是为列表中的每个元素创建一个唯一的ID。有2个库，uniqid和uuid。
npm install uniqid
然后在你的代码中：
import uniqueid from 'uniqid'
- OR if you use require: var uniqid = require('uniqid');
然后只需将键添加到需要它的HTML元素。在下面的示例中，请注意key = {uniqueid（）}
{this.state.someList.map((item) => <li>{item}</li>)}
I changed to this:
{this.state.someList.map((item) => <li key={uniqueid()}>{item}</li>)}
警告：数组或迭代器中的每个子节点都应该具有唯一的“键”支柱。
这是一个警告，因为我们要迭代的数组项将需要一个独特的相似性。
React处理迭代组件呈现为数组。
更好的解决方法是为要迭代的数组项提供索引。例如：
class UsersState extends Component
{
state = {
users: [
{name:"shashank", age:20},
{name:"vardan", age:30},
{name:"somya", age:40}
]
}
render()
{
return(
<div>
{
this.state.users.map((user, index)=>{
return <UserState key={index} age={user.age}>{user.name}</UserState>
})
}
</div>
)
}
index是React内置道具。
只需将唯一键添加到组件即可
data.map((marker)=>{
return(
<YourComponents
key={data.id} // <----- unique key
/>
);
})
检查：key = undef !!!
你还得到了警告信息：
Each child in a list should have a unique "key" prop.
如果您的代码完整正确，但如果您的代码完成
<ObjectRow key={someValue} />
someValue未定义！请先检查一下。你可以节省几个小时。
我使用Guid为每个键修复了这个问题：生成Guid：
guid() {
return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' +
this.s4() + '-' + this.s4() + this.s4() + this.s4();
}
s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
然后将此值分配给标记：
{this.state.markers.map(marker => (
<MapView.Marker
key={this.guid()}
coordinate={marker.coordinates}
title={marker.title}
/>
))}
这是一个警告，但解决这个问题将使Reacts渲染得更快，
这是因为React需要唯一标识列表中的每个项目。假设如果该列表的元素的状态在Reacts Virtual DOM中发生变化，则React需要确定哪个元素已更改以及DOM中需要更改的位置，以便浏览器DOM与Reacts Virtual DOM同步。
作为解决方案，只需在每个key标签中引入li属性。这个key应该是每个元素的唯一值。