React实现带防抖自动补全的TextInput：实时更新输入状态

核心思路是让onChange事件同时完成两个独立逻辑：

• 实时更新inputValue状态（无防抖，保证输入流畅）
• 调用防抖后的请求函数（避免频繁触发服务器请求）

注意：不能每次触发onChange都重新创建防抖函数，否则防抖逻辑会失效（每次都是新的定时器，起不到延迟效果），需要让防抖函数在组件生命周期内保持引用稳定。

具体实现步骤 #

1. 将防抖工具函数抽离到组件外部，避免每次渲染重复创建
2. 用useCallback包裹防抖后的请求逻辑，确保组件重新渲染时防抖函数引用不变
3. 在handleChange中先实时更新输入值，再调用防抖后的请求函数
4. 调整请求逻辑，直接接收输入值而非事件对象（React合成事件会在回调结束后被回收，延迟后访问e.target.value会报错）

完整代码 #

import { useState, useCallback } from 'react';
import axios from 'axios';

// 抽离防抖函数到组件外部，保证全局唯一
const inputDebounce = (func, timeout = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
};

const TextInput = () => {
  const [autoCompleteVal, setAutoCompleteVal] = useState([]);
  const [inputValue, setInputValue] = useState(''); // 初始化为空字符串，避免React警告

  // 用useCallback稳定防抖函数引用，仅初始化一次
  const debouncedFetch = useCallback(
    inputDebounce((value) => {
      axios.post('http://localhost:3000', {
        filterBy: value,
        headers: {
          'Content-Type': 'application/json',
        },
      })
      .then(response => {
        setAutoCompleteVal(response.data);
      })
      .catch(error => console.log(error));
    }),
    []
  );

  const handleChange = (e) => {
    const currentValue = e.target.value;
    // 1. 实时更新输入值，无防抖
    setInputValue(currentValue);
    // 2. 调用防抖后的请求函数
    debouncedFetch(currentValue);
  };

  const handleClick = (e) => {
    setInputValue(e.target.innerText);
    setAutoCompleteVal([]);
  };

  const listItems = autoCompleteVal.map(word => (
    <div key={word} onClick={handleClick}>{word}</div>
  ));

  return (
    <div>
      <div id="textInputContainer">
        <input 
          value={inputValue} 
          onChange={handleChange} 
          id="textInput" 
          type='text' 
        />
        {autoCompleteVal.length !== 0 && (
          <div className="suggestions">{listItems}</div>
        )}
      </div>
    </div>
  );
};

export default TextInput;

关键细节说明 #

• 防抖函数抽离：避免组件每次渲染都生成新的防抖函数，保证定时器的连续性
• useCallback的作用：防止因为组件状态更新导致防抖函数被重新创建，确保防抖逻辑正常工作
• 传递输入值而非事件对象：规避React合成事件的回收机制，避免延迟后无法获取输入值的问题
• 初始化inputValue：设置为空字符串，避免输入框初始值为undefined触发React控制台警告

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