fix(useList): fix setLoading when request multiple times (#391) (#397)

Co-authored-by: jialan <[email protected]>

Author: JackWang032

src/blockHeader/__tests__/blockHeader.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
-import { SizeType } from 'dt-react-component/esm/blockHeader';
 import '@testing-library/jest-dom/extend-expect';
 
-import BlockHeader from '../index';
+import BlockHeader, { type SizeType } from '../index';
 
 const props = {
     title: '标题1',

src/useList/__tests__/useList.test.ts

@@ -3,7 +3,15 @@ import { renderHook } from '@testing-library/react-hooks';
 
 import useList from '..';
 
+const awaitTimers = async () => {
+    for (let i = 0; i < 10; i++) {
+        await Promise.resolve();
+    }
+};
+
 describe('Test useList hook', () => {
+    afterEach(() => jest.useRealTimers());
+
     it('Should get initial data with default params', async () => {
         const fetcher = jest.fn().mockResolvedValue({
             total: 1,
@@ -84,4 +92,45 @@ describe('Test useList hook', () => {
 
         expect(fetcher).not.toBeCalled();
     });
+
+    it('Should hide loading after the last fetching done', async () => {
+        jest.useFakeTimers({ advanceTimers: true });
+        const fetcher = jest
+            .fn()
+            .mockReturnValueOnce(
+                new Promise((resolve) => {
+                    setTimeout(() => {
+                        resolve({
+                            total: 0,
+                            data: [],
+                        });
+                    }, 100);
+                })
+            )
+            .mockReturnValueOnce(
+                new Promise((resolve) => {
+                    setTimeout(() => {
+                        resolve({
+                            total: 0,
+                            data: [],
+                        });
+                    }, 200);
+                })
+            );
+
+        const { result } = renderHook(() => useList(fetcher, {}, { immediate: false }));
+
+        act(() => {
+            result.current.mutate();
+            result.current.mutate();
+        });
+
+        jest.advanceTimersByTime(100);
+        await awaitTimers();
+        expect(result.current.loading).toBe(true);
+
+        jest.advanceTimersByTime(100);
+        await awaitTimers();
+        expect(result.current.loading).toBe(false);
+    });
 });

src/useList/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { merge } from 'lodash';
 
 export type Fetcher<T, P> = (params: P) => Promise<{ data: T[]; total: number }>;
@@ -27,10 +27,13 @@ export default function useList<T extends Record<string, any>, P extends Record<
     const [total, setTotal] = useState(0);
     const [params, setParams] = useState<P>(initialParams);
     const [loading, setLoading] = useState(false);
+    const lastRequestId = useRef<symbol | undefined>(undefined);
 
     const options = useMemo(() => merge({ immediate: true }, rawOptions), [rawOptions]);
 
     const performFetch = (raw = params) => {
+        const requestId = Symbol('id');
+        lastRequestId.current = requestId;
         setLoading(true);
         fetcher(raw)
             .then(({ data, total }) => {
@@ -39,7 +42,7 @@ export default function useList<T extends Record<string, any>, P extends Record<
             })
             .catch(setError)
             .finally(() => {
-                setLoading(false);
+                lastRequestId.current === requestId && setLoading(false);
             });
     };