Next.js中的Infinite scroll在第一次获取时将最后一个元素加倍

Question

我有一个基于Next.js从Strapi Rest API抓取的项目。我根据取回的内容抓取和渲染卡片。因为我不想一次加载所有内容，所以我使用react- infinity -scroll实现了无限滚动。它工作得很好，我唯一的问题是，基于元素的数量，有时，最后一个对象再次返回，而不是下一页的第一个。这只发生在无限加载器的第一次fetch调用时，当用户第一次到达页面底部时。

initial fetch:

export async function getServerSideProps({locale}, ctx) {
const jwt = parseCookies(ctx).jwt
if (jwt) {
const articlesArray = await getArticles({locale}, jwt, 0, 10)
const articles = articlesArray.articlesList
const total = articlesArray.total
const cookieJwt = jwt
return {
props: {
articles,
cookieJwt,
total

},
}
}
// I DELETED THE AUTH LOGIC HERE 

GetArticles函数:

import qs from 'qs'
export async function getArticles({locale}, jwt,page, size) {
const query = qs.stringify({
pagination: {
start: page,
limit: size,
},
sort: ['date:desc'],
},
{
encodeValuesOnly: true,
});
const fetchArticles = await fetch(`${process.env.DB_HOST}/api/articles?locale=${locale}&populate=*&${query}`,
{
headers: {
Authorization: `Bearer ${jwt}`
}
})
const articles = await fetchArticles.json()
const articlesArray = {
articlesList: articles.data ,
total: articles.meta.pagination.total
}

return articlesArray
}

无限滚动组件:

<InfiniteScroll
pageStart={0}
loadMore={getMorePost}
hasMore={hasMore}
loader={<div className={cardStyle.loaderWrapper}><div className={cardStyle.loader}><Loader color={'orange'} variant={'bars'} /></div></div>}
>
<SimpleGrid cols={3}
spacing={"xl"}
breakpoints={[
{ maxWidth: 1200, cols: 2, spacing: 'md' },
{ maxWidth: 755, cols: 1, spacing: 'sm' },
]}>
{posts.map((article) => {
return(
<ArticleCard key={newKey()} data={article} locale={locale} onClick={() => handleClick(article)} />
)
}
)}
</SimpleGrid>
</InfiniteScroll>    

GetMorePosts函数:

const getMorePost = async () => {

if(pageCounter < total){

const res = await getArticles({locale},cookieJwt, pageCounter  , 10)
setPageCounter(pageCounter + 10)

const newPosts = res.articlesList;
setPosts((post) => [...post, ...newPosts]);
}
else {
setHasMore(false)

}
};

据我所知，前10个元素应该被加载，getMorePost应该加载接下来的10个元素。但事实并非如此

行为可以在这里观察到

完整的页面可以在repo

找到

Answer 1

我认为这个问题的快速修复可以使用lodash的_.uniqBy()方法(https://lodash.com/docs/4.17.15#uniqBy)。这将使您在第一次重新加载时总共显示19个项目，但它至少可以确保您没有任何重复的项目。

我认为真正的修复是找出为什么API返回第10项两次;当试图从数据库中抓取原始查询时，似乎初始值可能不正确。

使用打嗝套件并使用代理拦截器，看起来查询最终看起来像这样:/api/articles?locale=en&populate=*&pagination[start]=10&pagination[limit]=10&sort[0]=date%3Adesc。我认为如果你把分页[开始]增加1，那应该能解决你的问题。至少对我来说是这样。