diff --git a/packages/field/src/components/Select/SearchSelect/index.tsx b/packages/field/src/components/Select/SearchSelect/index.tsx index e7d1dc153b3a..430c39042264 100644 --- a/packages/field/src/components/Select/SearchSelect/index.tsx +++ b/packages/field/src/components/Select/SearchSelect/index.tsx @@ -206,7 +206,7 @@ const SearchSelect = (props: SearchSelectProps, ref: any) => { onClear?.(); fetchData(''); if (showSearch) { - setSearchValue(''); + setSearchValue(undefined); } }} {...restProps} @@ -226,7 +226,7 @@ const SearchSelect = (props: SearchSelectProps, ref: any) => { if (showSearch && autoClearSearchValue) { if (!searchValue) fetchData(''); onSearch?.(''); - setSearchValue(''); + setSearchValue(undefined); } if (!props.labelInValue) { diff --git a/packages/field/src/components/TreeSelect/index.tsx b/packages/field/src/components/TreeSelect/index.tsx index 355287ab6121..a78479e9b52d 100644 --- a/packages/field/src/components/TreeSelect/index.tsx +++ b/packages/field/src/components/TreeSelect/index.tsx @@ -52,7 +52,7 @@ const FieldTreeSelect: ProFieldFC = ( defaultKeyWords: propsSearchValue, }); - const [searchValue, setSearchValue] = useMergedState('', { + const [searchValue, setSearchValue] = useMergedState(undefined, { onChange: onSearch, value: propsSearchValue, }); @@ -97,8 +97,8 @@ const FieldTreeSelect: ProFieldFC = ( const onChange: TreeSelectProps['onChange'] = (value, optionList, extra) => { // 将搜索框置空 和 antd 行为保持一致 if (showSearch && autoClearSearchValue) { - fetchData(''); - setSearchValue(''); + fetchData(undefined); + setSearchValue(undefined); } propsOnChange?.(value, optionList, extra); }; @@ -151,9 +151,9 @@ const FieldTreeSelect: ProFieldFC = ( autoClearSearchValue={autoClearSearchValue} onClear={() => { onClear?.(); - fetchData(''); + fetchData(undefined); if (showSearch) { - setSearchValue(''); + setSearchValue(undefined); } }} onChange={onChange} @@ -162,8 +162,8 @@ const FieldTreeSelect: ProFieldFC = ( setSearchValue(value); }} onBlur={(event) => { - setSearchValue(''); - fetchData(''); + setSearchValue(undefined); + fetchData(undefined); onBlur?.(event); }} className={classNames(fieldProps?.className, layoutClassName)} diff --git a/packages/table/src/useFetchData.tsx b/packages/table/src/useFetchData.tsx index aa623250cd7f..7debdd21a4a1 100644 --- a/packages/table/src/useFetchData.tsx +++ b/packages/table/src/useFetchData.tsx @@ -40,11 +40,18 @@ const useFetchData = >( /** 轮询的setTime ID 存储 */ const pollingSetTimeRef = useRef(); - const [list, setList] = useMountMergeState(defaultData, { + + /** + * 用于存储最新的数据,这样可以在切换的时候保持数据的一致性 + */ + const [tableDataList, setTableDataList] = useMountMergeState(defaultData, { value: options?.dataSource, onChange: options?.onDataSourceChange, }); + /** + * 表格的加载状态 + */ const [tableLoading, setTableLoading] = useMountMergeState(false, { value: options?.loading, onChange: options?.onLoadingChange, @@ -72,7 +79,7 @@ const useFetchData = >( // Batching update https://github.com/facebook/react/issues/14259 const setDataAndLoading = (newData: T[], dataTotal: number) => { - setList(newData); + setTableDataList(newData); if (pageInfo?.total !== dataTotal) { setPageInfo({ @@ -104,14 +111,10 @@ const useFetchData = >( }); /** 请求数据 */ const fetchList = async (isPolling: boolean) => { - if ((tableLoading && typeof tableLoading === 'boolean') || requesting.current || !getData) { - return []; - } - // 需要手动触发的首次请求 if (manualRequestRef.current) { manualRequestRef.current = false; - return []; + return; } if (!isPolling) { if (typeof tableLoading === 'object') { @@ -142,13 +145,14 @@ const useFetchData = >( data!, [options.postData].filter((item) => item) as any, ); + // 设置表格数据 setDataAndLoading(responseData, total); onLoad?.(responseData, rest); return responseData; } catch (e) { // 如果没有传递这个方法的话,需要把错误抛出去,以免吞掉错误 if (onRequestError === undefined) throw new Error(e as string); - if (list === undefined) setList([]); + if (tableDataList === undefined) setTableDataList([]); onRequestError(e as Error); } finally { requesting.current = false; @@ -162,6 +166,11 @@ const useFetchData = >( if (pollingSetTimeRef.current) { clearTimeout(pollingSetTimeRef.current); } + + if ((tableLoading && typeof tableLoading === 'boolean') || requesting.current || !getData) { + return; + } + const msg = await fetchList(isPolling); // 把判断要不要轮询的逻辑放到后面来这样可以保证数据是根据当前来 @@ -177,7 +186,7 @@ const useFetchData = >( }, Math.max(needPolling, 2000)); } return msg; - }, debounceTime || 10); + }, debounceTime || 30); // 如果轮询结束了,直接销毁定时器 useEffect(() => { @@ -210,7 +219,7 @@ const useFetchData = >( return; } - if ((options.pageInfo && list && list?.length > pageSize) || 0) { + if ((options.pageInfo && tableDataList && tableDataList?.length > pageSize) || 0) { return; } @@ -219,7 +228,7 @@ const useFetchData = >( // (pageIndex - 1 || 1) 至少要第一页 // 在第一页大于 10 // 第二页也应该是大于 10 - if (current !== undefined && list && list.length <= pageSize) { + if (current !== undefined && tableDataList && tableDataList.length <= pageSize) { fetchListDebounce.run(false); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -245,11 +254,11 @@ const useFetchData = >( }, [...effects, manual]); return { - dataSource: list!, - setDataSource: setList, + dataSource: tableDataList!, + setDataSource: setTableDataList, loading: tableLoading, reload: async () => { - await fetchListDebounce.run(false); + return fetchListDebounce.run(false); }, pageInfo, pollingLoading,