ReactJS - オブジェクトの配列の要素を小道具として渡す

Question

私はaReact Applicationをビルドしています。私はブログの配列を保持する状態配列を持っています。 BlogDisplayコンポーネントを使用して各ブログをレンダリングしています。続き は私のコードです：

render() { 
     for(var i = 0;i < this.state.blogData.length;i++){ 
      blogDataToRender.push(<BlogDisplay blogData = {this.state.blogData[i]} onUserTriggerForDetailedView ={this.props.onUserTriggerForDetailedView}/>); 
     } 
     return (
      <div> 
       {blogDataToRender} 
      </div> 
     ); 
    } 

私はこのような警告取得しています：

index.js:5279 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `BloggerHome`. See https://facebook.github.io/react/docs/lists-and-keys.html#keys for more information. 
in BlogDisplay (created by BloggerHome) 
in BloggerHome (created by Blogger) 
in div (created by Blogger) 
in div (created by Blogger) 
in Blogger 

を正しく私のモデリングですか？どうすれば修正できますか？

ありがとうございます。あなたは、各BlogDisplayコンポーネントのkeyを追加する必要が

Answer 1

：

for(var i = 0;i < this.state.blogData.length;i++){ 
    blogDataToRender.push(<BlogDisplay key={i} blogData = {this.state.blogData[i]} onUserTriggerForDetailedView ={this.props.onUserTriggerForDetailedView}/>); 
} 

keyは、アレイ内の子コンポーネントのために重要です。これらの子コンポーネントの1つが動作中の場合、Reactはkeyを必要とし、どちらが操作されているかを判断する必要があります。また、ソース配列データが変更された場合、Reactにはkeyが必要です。

キーが必要な理由について詳しくは、公式documentを参照してください。

子コンポーネントごとにkeyの値はどのくらいですか？

上記の資料によると：

キーだけでグローバルに一意ではない、その兄弟の中でユニークである必要があります。

また、ソースデータに一意のIDがある場合はblogData[i].idが最適です。上記の例のようなインデックスは、子コンポーネントが並べ替えると（パフォーマンスの問題）、お勧めしません。

Answer 2

Reactの各要素はReactがそれを識別するために使用する一意のキーを持つ必要があります。要素を明白にレンダリングすると、Reactは自動的に要素を割り当てます。しかし、要素の配列を割り当てると、その配列の各要素にはデフォルトでキーが割り当てられていないため、必要になります。このようなもの：

blogDataToRender.push(<BlogDisplay key={i} blogData={this.state.blogData[i]} onUserTriggerForDetailedView={this.props.onUserTriggerForDetailedView}/>); 

Answer 3

Understanding unique keys for array children in React.jsにクリスの返信をチェックしてください。

これを修正するには、各要素に一意のidを設定し、各要素にキーの小道具を追加する必要があります。 Reactがどのようにキーを使用してリストの要素を特定するかの詳細についてはin the official documentationを読むことができます。

は、これはあなたのrender()方法がどのように見えるべきかです：

render() { 
    return (
     <div> 
      {this.state.blogData.map((item) => { 
       return (<BlogDisplay key={item.id} blogData={item} onUserTriggerForDetailedView={this.props.onUserTriggerForDetailedView} />) 
      })} 
     </div> 
    ); 
} 

Answer 4

は、あなたの質問に答えるためにすばやくエラーを読んで、それを修正するだけです！そのように、各コンポーネントにユニークキー値を追加します。この場合、

... 
    for(var i = 0;i < this.state.blogData.length;i++){ 
    blogDataToRender.push(
     <BlogDisplay 
     key={this.state.blogData[i].id} 
     blogData={this.state.blogData[i]} 
     onUserTriggerForDetailedView{this.props.onUserTriggerForDetailedView} 
    /> 
    ); 
    } 
... 

を私はあなたのブログのエントリのそれぞれが固有のIDを持っている、あなたはここに注意する必要がありますものはkeyということであると仮定値は一意である必要があり、配列内のその要素の位置に依存しません。キーが同じである必要があるこれらの要素をレンダリングするたびに、この値はReactによって再レンダリングを最適化するために使用され、変更されなかったアイテムのレンダリングは避けられます。これがなぜ必要なのかを知りたい場合は、linkが良いです。次回は、非常にうまくやっていて、たくさんのことを学ぶことができるので、ドキュメントを読むことをお勧めします。私はそれを行うだろう

今の方法は、mapを使用している：

は

... 
    const blogDataToRender = this.state.blogData.map(blogData => 
     <BlogDisplay 
     key={blogData.id} 
     blogData={blogData} 
     onUserTriggerForDetailedView{this.props.onUserTriggerForDetailedView} 
    /> 
    ); 
... 

これは読みやすさを助け、あなたは、インデックスを追跡する必要はありませんので、イテレータを活用しています。これは、Reactで開発するときに広く使われているパターンです。