在自定义的React钩子中使用去反跳来进行输入更改

import React, { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const debouncedInputValue = useDebounce(inputValue, 500);

  useEffect(() => {
    // 在debouncedInputValue变化时执行相应的操作，比如发送网络请求或更新组件状态
    // 例如：调用API搜索相关内容
    // fetch('https://api.example.com/search?q=' + debouncedInputValue)
    //   .then(response => response.json())
    //   .then(data => {
    //     // 处理返回的数据
    //   });

    // 这里只是简单地打印输入的值
    console.log(debouncedInputValue);
  }, [debouncedInputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={e => setInputValue(e.target.value)}
    />
  );
}