[解決済み】React.jsの配列の子要素のユニークキーを理解する

質問

JSONデータソースを受け取り、ソート可能なテーブルを作成するReactコンポーネントを構築しています。
動的なデータ行にはそれぞれ一意のキーが割り当てられていますが、それでもerror ofが発生します。

配列の各子要素は、一意の "key" プロパティを持つ必要があります。
TableComponentのrenderメソッドを確認します。

私の TableComponent render メソッドが返ります。

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

は TableHeader コンポーネントは1つの行であり、また一意のキーが割り当てられています。

それぞれの 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}/> は、その中のいくつかの子をキーなしでレンダリングしようとしています。

確認 この例 .

を削除してみてください。 key={i} から <b></b> 要素をdivの中に入れる（そしてコンソールを確認する）。

サンプルでは、キーを与えずに <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);

が投稿した回答 クリス には、この回答よりもさらに詳細な説明があります。 ぜひご覧ください。 https://stackoverflow.com/a/43892905/2325522

Reactのドキュメントで、和解におけるキーの重要性について。 キー