浏览代码

chore: 将查询时跳转到第一页移动到useQueryList中判断

xyh 2 年之前
父节点
当前提交
9d4514a69f

+ 25 - 6
packages/app/src/hooks/useQueryList/index.ts

@@ -1,8 +1,8 @@
 import {createPageContext, createSearchContext, usePage, useTableSearch} from '@hooks';
 import {BaseListResult, ListParams, OriginalListParams} from '@models';
 import {useQuery} from '@tanstack/react-query';
-import {jumpToPrevPage} from '@utils';
-import {useEffect, useState} from 'react';
+import {jumpToPrevPage, shallowEqual} from '@utils';
+import {useEffect, useRef, useState} from 'react';
 
 type UseQueryListResult<D> = [
   {
@@ -31,10 +31,28 @@ export function useQueryList<
 ): UseQueryListResult<R> {
   const [count, setCount] = useState(0);
   const [{page, pageSize}, {onCurrentPageChange}] = usePage(pageContext);
+  const prevData = useRef<R[]>([]);
+  const prevParams = useRef(params);
 
-  const {data, isFetching, refetch} = useQuery<R[]>(
+  const {data = [], isFetching, refetch} = useQuery<R[]>(
     [queryFn.name, page, pageSize, ...Object.values(params)],
     async function() {
+      /**
+       * 当参数发生改变说明请求内容发生变化
+       * 如果当前页码不为1需要跳转到第1页查询
+       */
+      if (page !== 1 && !shallowEqual(prevParams.current, params)) {
+        prevParams.current = params;
+        onCurrentPageChange(1);
+        return prevData.current;
+      }
+
+      /**
+       * 有可能参数发生变化但是页码为1 第一步不会拦截
+       * 这里确保参数是最新的参数
+       */
+      prevParams.current = params;
+
       const data = await queryFn({
         ...params,
         page: page.toString(),
@@ -43,18 +61,19 @@ export function useQueryList<
 
       if (data.msg === '200') {
         // 当页面只有一个数据的时候 删除了页码改为前一个 但是数据请求还是当前页码
-        // 需要判断当前页码是否无数据并且大于1 满足时跳转到前一个页面
+        // 需要判断当前是否无数据并且页码大于1 满足时跳转到前一个页面
         jumpToPrevPage({data: data.data.list, current: page, onPageChange: onCurrentPageChange});
 
         setCount(data.data.total);
 
-        return data.data.list;
+        return (prevData.current = data.data.list);
       }
 
       return [];
     },
     {
-      initialData: [],
+      placeholderData: [],
+      keepPreviousData: true,
     },
   );
 

+ 0 - 2
packages/app/src/pages/department/filter/hooks.ts

@@ -17,10 +17,8 @@ export function useField() {
 
 export function useSearch(name: string, code: string) {
   const dispatch = useContextSection(context, state => state[1]);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name, code}});
   }
 

+ 0 - 2
packages/app/src/pages/goods/filter/hooks.ts

@@ -6,10 +6,8 @@ import {goodsExport} from '@apis';
 export function useSearch() {
   const [value, setValue] = useState('');
   const dispatch = useContextSection(context, ([, dispatch]) => dispatch);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {number: value}});
   }
 

+ 2 - 4
packages/app/src/pages/menu-id/filter/hooks.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
-import {context, pageContext} from '../context';
-import {useContextSection, usePage} from '@hooks';
+import {context} from '../context';
+import {useContextSection} from '@hooks';
 
 export function useField() {
   const name = useContextSection(context, state => state[0].name);
@@ -19,10 +19,8 @@ export function useField() {
 
 export function useHandle(value: string) {
   const dispatch = useContextSection(context, state => state[1]);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 

+ 2 - 4
packages/app/src/pages/menu/filter/hooks.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
-import {context, pageContext} from '../context';
-import {useContextSection, usePage} from '@hooks';
+import {context} from '../context';
+import {useContextSection} from '@hooks';
 
 export function useField() {
   const name = useContextSection(context, state => state[0].name);
@@ -19,10 +19,8 @@ export function useField() {
 
 export function useHandle(value: string) {
   const dispatch = useContextSection(context, state => state[1]);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 

+ 2 - 4
packages/app/src/pages/pda-menu/filter/hooks.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
-import {context, pageContext} from '../context';
-import {useContextSection, usePage} from '@hooks';
+import {context} from '../context';
+import {useContextSection} from '@hooks';
 
 export function useField() {
   const name = useContextSection(context, state => state[0].name);
@@ -19,10 +19,8 @@ export function useField() {
 
 export function useHandle(value: string) {
   const dispatch = useContextSection(context, state => state[1]);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 

+ 0 - 2
packages/app/src/pages/role/filter/hooks.ts

@@ -15,10 +15,8 @@ export function useField() {
 
 export function useSearch(value: string) {
   const [, dispatch] = useContext(context);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name: value}});
   }
 

+ 0 - 2
packages/app/src/pages/storage/filter/hooks.ts

@@ -28,10 +28,8 @@ export function useSearch(state: {
   isNotDisable: string,
 }) {
   const dispatch = useContextSelector(context, ([, dispatch]) => dispatch);
-  const [,{onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: state});
   }
 

+ 0 - 2
packages/app/src/pages/user/filter/hooks.ts

@@ -17,10 +17,8 @@ export function useField() {
 
 export function useSearch(name: string, code: string) {
   const dispatch = useContextSection(context, ([,dispatch]) => dispatch);
-  const [, {onCurrentPageChange}] = usePage(pageContext);
 
   function onSearch() {
-    onCurrentPageChange(1);
     dispatch({type: 'SEARCH', payload: {name, code}});
   }