Question

我正在研究react / redux应用程序。该应用程序从API呈现数据，但每次调用最多只能显示25个项目。我有一个“加载更多”按钮来发送另一个API调用以获取接下来的25个项目。我有一个函数（getAllReviews）将所有数据推送到数组并返回数组。然后我映射数组以将数据呈现到页面上。数据正确附加到页面，但是，由于映射发生在整个数组上，我收到警告：警告：flattenChildren（...）：遇到两个具有相同键的子节点。子键必须是唯一的;当两个孩子共用一把钥匙时，只会使用第一个孩子。

有关如何避免此警告的建议/将信息附加到页面的其他方式吗？

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> 

);

}

Answer 1

@ mleonard87对您的问题的评论是正确的，您需要确保您使用的密钥是唯一的。我看到你回复评论说你把它改成了索引 - 使用索引作为反应中的一个键是一个反模式（这里是关于这个的帖子 - https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.w1usaxz9j），因为项目的索引可以改变，它和＆＃39;不是用于密钥的可靠值。

当你循环渲染项目时，他们需要有一个反应键来正确执行。您可以在他们的文档中详细了解这一点 - https://facebook.github.io/react/docs/reconciliation.html

我很惊讶你的身份证并不独特！ ID通常意味着是唯一标识符。有什么方法可以解决这个问题，使它们独一无二吗？或者，审核对象是否还有其他值，每次审核都是可靠的？

React / Redux使用按钮将更多数据附加到页面

1 个答案: