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

【问题标题】：Shouldn't I get unique data when I fetch from Github API?当我从 Github API 获取时，我不应该得到唯一的数据吗？
【发布时间】：2019-12-14 11:00:39
【问题描述】：

我有一个应用程序显示来自 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 中给了我一个警告。

【问题讨论】：

@Daan 它使用模板文字将page嵌入到请求URL中。

标签： javascript reactjs api key fetch

【解决方案1】：

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

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

无论如何，一个快速的解决方案是将page 和item.id 组合为key。比如：

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

这应该使key 独一无二。

【讨论】：