如何解决无限滚动更新数据两次
我有一个懒加载的表(无限滚动)。不幸的是,我不知道为什么,但是当我滚动到底部时它会在 data
上更新两次。因此对 graphql 进行了两次查询而不是一次查询。如果我从 data
依赖项中删除 fetchMore
它工作正常(但是,eslint 会抛出警告,因此它不是解决方案)。此外,当我删除滚动并用手动按钮替换它并单击获取时也很好用,所以我不知道问题是在查询中还是在 WithInfiniteScroll
const LIMIT = 10;
const updateQuery = (
previousQueryResult: GetStaffQuery,options: {
fetchMoreResult?: GetStaffQuery;
variables?: GetStaffQueryVariables;
}
): GetStaffQuery => {
const {fetchMoreResult} = options;
const currentNodes = previousQueryResult.staff.nodes || [];
const newNodes = fetchMoreResult?.staff.nodes || [];
const newResult = {
staff: {
...fetchMoreResult?.staff,nodes: [...currentNodes,...newNodes],},};
return newResult;
};
export const useUsersList = () => {
const [isInitialFetching,setIsInitialFetching] = useState(true);
const {data,fetchMore: handleFetchMore,loading} = useGetStaffQuery({
variables: {limit: LIMIT,nextToken: null},onCompleted: () => {
setIsInitialFetching(false);
},});
useEffect(() => {
debugger; //triggered twice when scrolled to the bottom
},[data]);
const fetchMore = useCallback(() => {
const nextToken = data?.staff.nextToken || null;
if (nextToken && !loading && !isInitialFetching) {
const queryVariables: GetStaffQueryVariables = {
limit: LIMIT,nextToken,};
handleFetchMore({variables: queryVariables,updateQuery});
}
},[data,handleFetchMore,isInitialFetching,loading]);
return {
isLoading: loading,canLoadMore: Boolean(data?.staff.nextToken && !loading) || false,fetchMore,users: data?.staff.nodes || [],};
};
无限滚动:
import React,{useEffect,ReactNode} from 'react';
import {useInView} from 'react-intersection-observer';
type PropTypes = {
children?: ReactNode;
canLoadMore: boolean;
onLoadMore: () => unknown;
};
const rootMargin = '400px';
export const WithInfiniteScroll = ({
children,canLoadMore,onLoadMore,}: PropTypes) => {
const [ref,isElementInViewport] = useInView({
rootMargin,skip: !canLoadMore,});
useEffect(() => {
if (canLoadMore && isElementInViewport) {
onLoadMore();
}
},[canLoadMore,isElementInViewport,onLoadMore]);
return (
<>
{children}
<div ref={ref} />
</>
);
};
和一些组件草案:
<WithInfiniteScroll canLoadMore={canLoadMore} onLoadMore={onLoadMore}>
<div>
{users.map(user => <span>{user.id}</span>)}
</div>
</WithInfiniteScroll>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。