javascript - 了解React.js中数组子项的唯一键(Understanding unique keys for array children in React.js)

Question

I'm building a React component that accepts a JSON data source and creates a sortable table.(我正在构建一个接受JSON数据源并创建可排序表的React组件。)

Each of the dynamic data rows has a unique key assigned to it but I'm still getting an error of:(每个动态数据行都有一个分配给它的唯一键，但是我仍然遇到以下错误：) Each child in an array should have a unique "key" prop.(数组中的每个子代都应具有唯一的“键”道具。)
Check the render method of TableComponent.(检查TableComponent的渲染方法。) My TableComponent render method returns:(我的TableComponent渲染方法返回：) <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> The TableHeader component is a single row and also has a unique key assigned to it.(TableHeader组件是单行，还为它分配了唯一的键。) Each row in rows is built from a component with a unique key:(row中的每一rows都是由具有唯一键的组件构建的：) <TableRowItem key={item.id} data={item} columns={columnNames}/> And the TableRowItem looks like this:(并且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?(是什么导致独特的按键道具错误？)   ask by Brett DeWoody translate from so

Answer 1

You should add a key to each child as well as each element inside children .(您应该为每个子项以及子项中的每个元素添加一个键。)

This way React can handle the minimal DOM change.(这样，React可以处理最小的DOM更改。) In your code, each <TableRowItem key={item.id} data={item} columns={columnNames}/> is trying to render some children inside them without a key.(在您的代码中，每个<TableRowItem key={item.id} data={item} columns={columnNames}/>都试图在其中创建一些没有键的子级。) Check this example .(检查此示例 。) Try removing the key={i} from the <b></b> element inside the div's (and check the console).(尝试从div的<b></b>元素中删除key={i} （并检查控制台）。) 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.(在示例中，如果我们不给钥匙<b>元素，我们希望只更新object.city ，做出反应需要重新渲染整个行VS只是元素。) Here is the code:(这是代码：) 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); The answer posted by @Chris at the bottom goes into much more detail than this answer.(@Chris在底部发布的答案比该答案要详细得多。) Please take a look at https://stackoverflow.com/a/43892905/2325522(请看一下https://stackoverflow.com/a/43892905/2325522) React documentation on the importance of keys in reconciliation: Keys(对文档进行核对： 密钥在对帐中的重要性： 密钥)