- 公開日：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思考は同じようにマイナーな道を進む気がします。
とはいえ、便利なので、少しずつマイアプリにも取り入れていこうと思います。
以上です。
Reactの本
javascriptの名書
参考サイト
この記事がお役にたちましたらシェアをお願いします
