Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(useInfiniteScroll): reload data should be latest #2124

Merged
merged 3 commits into from
Mar 23, 2023
Merged

fix(useInfiniteScroll): reload data should be latest #2124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efec7a3
fix: reload data should be latest
hchlq Mar 17, 2023
f87ea13
test: add test case
hchlq Mar 17, 2023
546f35d
Merge branch 'master' into hotfix/reload-data-latest
hchlq Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/hooks/src/useInfiniteScroll/__tests__/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,35 @@ describe('useInfiniteScroll', () => {
});
});

it('reload data should be latest', async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

试了下这个 test 不改也能过

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里主要测试的是最终结果没问题，那个结果态还不太好 mock

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@miracles1919 我试了下 cross-env REACT_MODE=strict jest packages/hooks/src/useInfiniteScroll/__tests__/index.test.ts 执行时，我特定写了个 useEffect，好像只运行一次，符合预期么

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我知道了，引用的 renderHook 还是之前的，strict 模式要从 utils 引入，应该是之前 strict 问题比较多，所以没改

let listCount = 5;
const mockRequestFn = async () => {
await sleep(1000);
return {
list: Array.from({
length: listCount,
}).map((_, index) => index + 1),
nextId: listCount,
hasMore: listCount > 2,
};
};

const { result } = setup(mockRequestFn);

await act(async () => {
jest.advanceTimersByTime(1000);
});
expect(result.current.data).toMatchObject({ list: [1, 2, 3, 4, 5], nextId: 5 });

listCount = 3;
await act(async () => {
result.current.reload();
jest.advanceTimersByTime(1000);
});

expect(result.current.data).toMatchObject({ list: [1, 2, 3], nextId: 3 });
});

it('mutate should be work', async () => {
const { result } = setup(mockRequest);
const { mutate } = result.current;
Expand Down
12 changes: 6 additions & 6 deletions packages/hooks/src/useInfiniteScroll/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,17 @@ const useInfiniteScroll = <TData extends Data>(
},
);

const loadMore = () => {
const loadMore = useMemoizedFn(() => {
if (noMore) return;
setLoadingMore(true);
run(finalData);
};
});

const loadMoreAsync = () => {
const loadMoreAsync = useMemoizedFn(() => {
if (noMore) return Promise.reject();
setLoadingMore(true);
return runAsync(finalData);
};
});

const reload = () => {
setLoadingMore(false);
Expand Down Expand Up @@ -123,8 +123,8 @@ const useInfiniteScroll = <TData extends Data>(
loadingMore,
noMore,

loadMore: useMemoizedFn(loadMore),
loadMoreAsync: useMemoizedFn(loadMoreAsync),
loadMore,
loadMoreAsync,
reload: useMemoizedFn(reload),
reloadAsync: useMemoizedFn(reloadAsync),
mutate: setFinalData,
Expand Down