理解React.js中数组子元素的唯一键

Question

理解React.js中数组子元素的唯一键

我正在构建一个Reaction组件，它接受JSON数据源并创建一个可排序的表。
每个动态数据行都有一个分配给它的唯一键，但我仍然得到以下错误：

数组中的每个子数组都应该有一个唯一的“键”支柱。
检查TableComponent的呈现方法。

我的TableComponentRender方法返回：

<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>
    )
  }});

是什么导致了唯一的键支柱错误？