React/Redux將更多數據附加到頁面使用按鈕

我正在開發一個react/redux應用程序。該應用呈現來自API的數據，但每次只能顯示最多25個項目。我有一個「加載更多」按鈕來發送另一個調用API來獲取接下來的25個項目。我有一個函數（getAllReviews）將所有數據推送到一個數組並返回數組。然後我映射到數組以將數據呈現到頁面上。數據正確地附加到頁面上，但是，由於映射發生在整個數組上，所以我收到警告：警告：flattenChildren（...）：遇到兩個具有相同鍵的子項。子鑰匙必須是唯一的;當兩個孩子分享一把鑰匙時，只有第一個孩子會被使用。React/Redux將更多數據附加到頁面使用按鈕

有關如何避免此警告/以其他方式將信息附加到頁面的任何建議？

const ReviewTile = React.createClass({ 
     getInitialState() { 
    return { 
     page: 1, 
     allReviews: [] 
    } 
    }, 
    getAllReviews(){ //pushes all 25 items to allReviews array 
     let reviews = this.props.reducerReview.allReviewData[0].reviewData.reviews; 
     reviews.forEach(ele => { 
      this.state.allReviews.push(ele) 
     }) 
     return this.state.allReviews; 
    }, 

    getMoreReviews(event){ 
     event.preventDefault(); 
     let page = ++this.state.page; 
     this.props.postReviews(page); //returns new array with 25 items 
     this.getAllReviews(); 
    }, 
    render() { 
     let reviews = this.getAllReviews(); 
      return (
    <div> 
    { 
    reviews.map((review) => 
      <Review //component 
       key={review.id} 
       reviewBody={review.review} 
      /> 
     ) 
     } 

     <button 
      type="button" 
      className="btn" 
      onClick={ this.getMoreReviews }> Load More 
     </button> 
    </div> 

);

}

來源

2016-10-30 ellier7

是否your review.id值unique？我好像他們不是。 Review元素上「key」屬性的值應該是唯一的，例如主鍵。一個可能的罪魁禍首是您的getMoreReviews函數使用相同的ID加載重複的評論。 – mleonard87

修改爲reviews.map（（review，i）=> <評論 key = {i} – ellier7

@ mleonard87對你的問題的評論是正確的，你需要確保你正在使用的密鑰都是唯一的。我看到你在評論中回覆說你把它切換爲索引 - 使用索引反應中的一個鍵是一個反模式（這裏是一個關於這個 - https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.w1usaxz9j），因爲項目索引可以改變，它不是一個可靠的值用於關鍵。

當你循環渲染項目時，他們需要有一個密鑰才能正確執行。你可以詳細閱讀他們的文檔 - https://facebook.github.io/react/docs/reconciliation.html

我很驚訝你的ID不是唯一的！一個ID通常是一個唯一的標識符。有沒有什麼辦法可以解決這個問題，使它們獨一無二？或者，審覈對象上是否存在另一個值，這些值在每次審覈時都是可靠的？

來源

2016-10-31 01:59:48

React/Redux將更多數據附加到頁面使用按鈕

回答

相關問題