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唯一。

从Github API获取信息时，我是否应该获取唯一数据？

1 个答案: