Javascript 不应该'；当我从Github API获取数据时，我不能得到唯一的数据吗？

我有一个显示GithubAPI中趋势库的应用程序

我使用此函数获取数据，每次到达页面底部时，页面都会增加：

function fetchMoreRepos() {
    const url = `https://api.github.com/search/repositories?q=created:>2017-10-22&sort=stars&order=desc&page=${page}`;
    axios.get(url).then(res => setRepos([...repos, ...res.data.items]));
    setPage(page + 1);
    setIsFetching(false);
  } 

我使用这行代码来呈现每个存储库：

return repos.map(item => <Repo repo={item} key={item.id} />);

return repos.map（item=>）；

---

问题是，有时当我进入另一个页面时，我没有获得唯一的存储库，这意味着

key=“item.id”

不是唯一的，这在React中给了我一个警告。

我不完全确定为什么在

页面上出现一些结果

一种猜测是趋势回购的顺序正在改变，导致第1页末尾的回购在顺序中下降了几个位置，并被推到第2页的开头。例如，repo#10和repo#11交换位置，如果您每页请求10个结果，则repo#10最初位于第一页，然后推送到第二页

无论如何，一个快速的解决方案是将
键的
页面
和
item.id
组合起来。比如：

key={`${page}-${item.id}`} 

这将使
键
唯一
 @Daan它正在使用一个模板文本在请求URL中嵌入
page
。