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

Question

我有一个应用程序，显示来自GitHub API的趋势存储库。

我正在使用这个函数来获取数据，每次到达页面底部时页面增量：

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} />);

问题是有时当我到达另一个页面时，我没有得到唯一的存储库，这意味着key="item.id"不是唯一的，这给了我在 React 中的警告。

Answer 1

我不完全确定为什么page请求中会出现一些结果。

一种猜测是趋势存储库的顺序正在发生变化，导致第 1 页末尾的存储库在顺序中下降几个位置，并将其推送到第 2 页的开头。例如，存储库 #10 和存储库 #11 交换位置，如果每页请求 10 个结果，则存储库 #10 最初位于第一页，然后推送到第二页。

无论如何，一个快速的解决方案是将page和item.id结合起来key.像这样：

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

这应该使key独一无二。