React.js无限滚动开发遇重复Key警告问题求助

这个警告的核心原因是：React依赖key属性识别列表项的唯一性，当列表中有两个子元素的key值相同时，就会抛出该提示。以下是具体解决方法：

1. 使用数据本身的唯一标识作为Key（最优方案） #

新闻类数据的url通常是唯一的，直接将其设为key即可，修改你的渲染代码如下：

{this.state.articles.map((element) => {
  return <NewsItem 
    key={element.url}
    title={element.title || ""} 
    description={element.description || ""} 
    imageUrl={element.urlToImage} 
    newsUrl={element.url} 
    author={element.author} 
    date={element.publishedAt} 
    source={element.source.name} 
  />
})}

这里把原代码的三元表达式element.title ? element.title : ""简化为element.title || ""，功能完全一致，代码更简洁。

2. 万不得已时使用索引作为Key（不推荐） #

如果你的数据中没有任何唯一字段，可以临时用map方法的第二个参数（索引）作为key，但这种方式只适合列表不会重新排序、新增/删除操作仅在末尾的场景，否则可能引发渲染异常：

{this.state.articles.map((element, index) => {
  return <NewsItem 
    key={index}
    title={element.title || ""} 
    description={element.description || ""} 
    imageUrl={element.urlToImage} 
    newsUrl={element.url} 
    author={element.author} 
    date={element.publishedAt} 
    source={element.source.name} 
  />
})}

3. 检查并清理重复数据 #

如果是无限滚动时重复加载了同一批数据，导致articles数组存在重复项，需要在合并新数据时做去重处理：

// 加载新数据后，基于url去重再更新state
const fetchedArticles = // 你的新获取数据
const uniqueArticles = Array.from(
  new Map([...this.state.articles, ...fetchedArticles].map(item => [item.url, item])).values()
)
this.setState({ articles: uniqueArticles })

内容的提问来源于stack exchange，提问作者Adarsh Sonu