ReactJS - 傳遞一個對象數組的元素作爲道具

我正在構建一個反應應用程序。我有一個狀態數組，其中包含博客數組。我使用BlogDisplay組件呈現每個博客。以下是我的代碼：ReactJS - 傳遞一個對象數組的元素作爲道具

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

是我的模型是否正確？我該如何解決這個問題？

非常感謝。

來源

2017-06-25 Varbi

我試過了，但是不成功。可能是因爲我的新手知識。你能提供一個代碼示例嗎？ – Varbi

您需要添加一個key每個BlogDisplay組件：

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是孩子的重要部件在數組中。因爲當其中一個子組件正在運行時，React需要key來確定哪個組件正在運行。另外，當源數組數據更改時，React需要key來檢查組件的差異。

有關密鑰爲什麼必要的詳細說明，請參閱官方document。

對於每個子部件，應該是什麼值key？

根據上述文件：

的關鍵只要是它的兄弟姐妹中是獨一無二的，而不是全局唯一的。

另外，如果源數據中存在唯一標識，則blogData[i].id是最佳選擇。如果子組件將重新排序（性能問題），則不建議像上述示例中那樣使用索引。

來源

2017-06-25 06:07:19 shaochuancs

React中的每個元素都需要一個唯一的鍵，React用它來標識它。當你公然渲染一個元素時，React會自動分配一個元素。但是，當您分配一個ARRAY元素時，該數組中的每個元素默認都沒有分配一個鍵，所以您需要。類似這樣的：

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

來源

2017-06-25 06:07:56 Jayce444

查看Chris的回覆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> 
    ); 
}

來源

2017-06-25 06:08:39

要回答你的問題很快所有你需要做的是讀取錯誤並修復它！一個唯一鍵值爲每個組件添加像這樣：

... 
    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中開發時廣泛使用的模式。

來源

2017-06-25 06:13:06 G4bri3l

ReactJS - 傳遞一個對象數組的元素作爲道具

回答

相關問題