ユニークな「キー」小道具は、メソッドをレンダリング - ReactJS

Question

私のアプリが警告を持っていることを言う：Each child in an array or iterator should have a unique "key" prop. Check the render method of 'SortableTable'聞くが、私のSortableTableファイルです：

import React from 'react'; 
import {Link} from 'react-router'; 
import {v4 as uuid} from 'node-uuid'; 

export default class SortableTable extends React.Component { 
    render() { 

     return (
      <table style={{width: '100%'}} className={this.props.className} id={this.props.id}> 
       <thead> 
        <tr> 
         {this.props.headers.map(this.generateHeaders)} 
        </tr> 
       </thead> 
       <tbody> 
        {this.props.children} 
       </tbody> 
      </table> 
     ); 
    } 

    generateHeaders = (value) => { 
     if (Object.keys(value).length === 0) return 
     let sort, colspan 
     if(value.sort) { 

      let {query} = this.props; 
      let nQuery, title, icon, colspan = 1; 
      if(query.sort === value.sort && query.sortDirection === 'desc') { 
       nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'asc', page: 1}) 
       title = 'asc'; 
       icon = String.fromCharCode(0xe630) 
      } else { 
       nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'desc', page: 1}) 
       title = 'desc'; 
       icon = String.fromCharCode(0xe62d) 
      } 
      sort = <Link to={this.props.link} query={nQuery} className="icon order active" title={title} data-icon={icon} /> 

     } 
     let className = value.className ? value.className : '' 
     if(value.colspan) { 
      colspan = value.colspan 
     } 
     return <th className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> 
    } 

誰かがこの警告を解決するために、キー小道具を設定する方法私を見ることができますか？

Answer 1

アイデアは、一意の値を持つキー属性を持つことです。 valueオブジェクトがidのようなユニークな特性を持っている場合、あなたは代わりにそれを使用することができ、また

generateHeaders = (value, index) => { 
    // ... 
    return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> 
} 

：あなたはindex, the second argument of Array#map callbackを使用することができます。

Answer 2

あなたは番目のタグにキーを挿入する必要があります

generateHeaders = (value, index) => { ... return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th> }

Answer 3

あなたrender方法からそれらの配列を返すしているので、generateHeadersによって返さ<th>要素は、それに設定されたkey属性を持っている必要があります。

これを達成するための最も簡単な方法は、インデックスを使用することです：

generateHeaders = (value, index) => { 
// ... 
    return <th key={index} //... 

これは警告が離れて行くようになりますが、1つが存在する場合には、各valueのユニークなプロパティを使用することをお勧めします。これは、Reactがキーを使用して2つのアイテムが同じかどうかを判断するためです。配列インデックスを使用していて、配列のどこかに新しい値を挿入すると、インデックスが変更され、アイテムが不必要に再レンダリングされます。