ダメ男のブログ: React Warning: Each child in an array or iterator should have a unique "key" prop.

2015年12月10日木曜日

React Warning: Each child in an array or iterator should have a unique "key" prop.

公開日：2015年12月10日

記事概要

Reactで、『Each child in an array or iterator should have a unique "key" prop.』の警告エラーが発生した場合の対策方法を記載した記事です。

環境

React 0.14.3
ruby2.2.3
rails4.2.5
nginx1.8.0
chromeバージョン 47.0.2526.73 m

エラーの発生箇所

reactのチュートリアルを実装している時に、CommentListというコンポーネントの中で、Commentという子コンポーネントをループで回して生成しているところで発生しました。
warningなので、結果の表示に問題はありません。

/nginx/index.html


var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment author={comment.author}>
            {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

『should have a unique "key" prop.』なので、keyというプロパティを持つ必要があるようです。
なので、以下のように変更します。

/nginx/index.html


var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment key={comment.author} author={comment.author}>
            {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

key={comment.author}を追加しました。
これでブラウザを更新すると、『Each child in an array or iterator should have a unique "key" prop.』の警告エラーが発生しないことが確認できました。

まとめ

Reactはよくできたフレームワークですが、個人的に、今のところ流行る気がしません。
componentの考え方は、素晴らしい考え方です。しかし、周りを見ると、既存の開発の考え方に慣れた技術者には理解しにくいようです。
Web Componentsも同じですね。一向に流行る気配がありません。
scala等の関数言語も結局流行りませんでした。component思考は同じようにマイナーな道を進む気がします。
とはいえ、便利なので、少しずつマイアプリにも取り入れていこうと思います。

以上です。