diff --git a/src/components/exam/ExamSection.tsx b/src/components/exam/ExamSection.tsx index 71263d3..e90e7b5 100644 --- a/src/components/exam/ExamSection.tsx +++ b/src/components/exam/ExamSection.tsx @@ -39,6 +39,9 @@ export const ExamSection = ({ const [displayCount, setDisplayCount] = useState(INITIAL_LOAD_COUNT); const observerTarget = useRef(null); const [isLoadingMore, setIsLoadingMore] = useState(false); + // 防抖:内部输入值 + const [debouncedInputValue, setDebouncedInputValue] = useState(searchValue); + const debounceTimerRef = useRef(null); useEffect(() => { getTodayExamProgress({}) @@ -56,6 +59,31 @@ export const ExamSection = ({ }); }, []); + // 防抖:当输入值变化时,延迟 0.5 秒后调用 onSearchChange + useEffect(() => { + if (debounceTimerRef.current) { + window.clearTimeout(debounceTimerRef.current); + } + + debounceTimerRef.current = window.setTimeout(() => { + onSearchChange(debouncedInputValue); + }, 500); + + return () => { + if (debounceTimerRef.current) { + window.clearTimeout(debounceTimerRef.current); + } + }; + }, [debouncedInputValue, onSearchChange]); + + // 当外部 searchValue 变化时(比如清空搜索),同步内部值(仅在值确实不同时更新) + useEffect(() => { + if (searchValue !== debouncedInputValue && searchValue === '') { + // 只在外部清空搜索时同步,避免用户输入时被覆盖 + setDebouncedInputValue(''); + } + }, [searchValue]); + // 当 filteredClients 变化时,重置显示数量 useEffect(() => { setDisplayCount(INITIAL_LOAD_COUNT); @@ -114,8 +142,8 @@ export const ExamSection = ({
onSearchChange(e.target.value)} + value={debouncedInputValue} + onChange={(e) => setDebouncedInputValue(e.target.value)} className='text-sm' />