React Hook使用setTimeout防抖时受控输入框无法输入问题

云上老周

2026-8-29

问题根因

最核心的逻辑错误：你给受控组件的状态更新加了防抖。受控输入框的显示内容完全和input state绑定，你把setInput放到2秒延迟后才执行，用户敲字的时候state不立刻更新，输入框拿不到最新值，自然表现为输不进去内容。
防抖Hook实现不符合React运行机制：你写的useDebounce用普通变量timer存定时器ID，组件每次重渲染时这个变量都会被重置为undefined，既清不掉之前的定时器，重渲染时还会生成全新的防抖函数，防抖效果完全失效。
隐性bug：React 17之前的版本会回收复用合成事件对象，你把e直接传给setTimeout的异步回调，等2秒后回调执行时，事件对象早就被回收了，根本拿不到e.target.value。另外onChange里写e.preventDefault()完全多余，不需要阻止输入的默认行为。

修复方案

先把逻辑理清楚：输入框必须实时响应用户输入，所以setInput要同步执行，你要防抖的是「输入停下后发API请求」这个动作，不是更新输入框内容的动作。
首先修正useDebounce的实现，用useRef存定时器引用，保证重渲染时定时器ID不丢失，同时用useCallback缓存防抖函数，避免无效重渲染：

import { useRef, useCallback } from 'react';

const useDebounce = (func, delay = 400) => {
  const timerRef = useRef(null);

  return useCallback((...args) => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      func(...args);
    }, delay);
  }, [func, delay]);
};

export default useDebounce;

然后调整组件里的用法，拆分状态更新和防抖请求逻辑：

import { useState } from 'react';
// 引入上面写好的useDebounce

function SearchInput() {
  const [input, setInput] = useState('');

  // 只给API请求逻辑加防抖，不要碰状态更新
  const fetchSearchResult = useDebounce((keyword) => {
    console.log('发起搜索，关键词：', keyword);
    // 这里写你的接口请求逻辑即可
  }, 2000);

  const handleInputChange = (e) => {
    const currentValue = e.target.value;
    setInput(currentValue); // 同步更新state，保证输入框实时显示内容
    fetchSearchResult(currentValue); // 直接传值，避免异步场景下事件对象失效
  };

  return (
    <>
      <input
        type="text"
        onChange={handleInputChange}
        value={input}
        className='border-2 border-cyan-500'
      />
    </>
  );
}

补个小提示：如果你的需求就是做「输入完等2秒才把内容显示到框里」的特殊效果，不要用受控组件绑定延迟更新的state，换成非受控组件通过ref拿输入值就行，但常规搜索场景完全不建议这么做，输入无实时反馈的体验非常差。

内容的提问来源于stack exchange，提问作者OscarDev