了解React.js中数组子项的唯一键 [英] Understanding unique keys for array children in React.js

问题描述

我正在构建一个React组件，它接受一个JSON数据源并创建一个可排序的表。

每个动态数据行都有一个唯一的键分配给它但我仍然收到一个错误of：

I'm building a React component that accepts a JSON data source and creates a sortable table.
Each of the dynamic data rows has a unique key assigned to it but I'm still getting an error of:

数组中的每个子节点都应该有一个唯一的key道具。

检查渲染方法TableComponent。

Each child in an array should have a unique "key" prop.
Check the render method of TableComponent.

我的 TableComponent render方法返回：

My TableComponent render method returns:

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

TableHeader 组件是一行，也有一个唯一的密钥分配给它。

The TableHeader component is a single row and also has a unique key assigned to it.

每个行在行是使用具有唯一键的组件构建的：

Each row in rows is built from a component with a unique key:

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

导致唯一密钥道具错误的原因是什么？

What is causing the unique key prop error?

推荐答案

您应该为每个孩子以及孩子内的每个元素添加一个键。

这样React可以处理最小的DOM更改。

This way React can handle the minimal DOM change.

在您的代码中，每个< TableRowItem key = {item.id} data = {item} columns = {columnNames} /> 试图在没有钥匙的情况下在里面渲染一些孩子。

In your code, each <TableRowItem key={item.id} data={item} columns={columnNames}/> is trying to render some children inside them without a key.

检查此示例。

尝试删除 key = {i} 来自div内的< b>< / b> 元素（并检查控制台）。

Try removing the key={i} from the <b></b> element inside the div's (and check the console).

在示例中，如果我们没有为< b> 元素提供密钥，我们只想更新 object.city ，React需要重新渲染整行而不仅仅是元素。

In the sample, if we don't give a key to the <b> element and we want to update only the object.city, React needs to re-render the whole row vs just the element.

以下是代码：

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

The answer posted by @Chris at the bottom goes into much more detail than this answer. Please take a look at https://stackoverflow.com/a/43892905/2325522

在对帐中反映密钥重要性的文档：键

React documentation on the importance of keys in reconciliation: Keys

这篇关于了解React.js中数组子项的唯一键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！