如何在react中使用useDebounce实现搜索功能

npm install react-hooks

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

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

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

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

  return debouncedValue;
};

const SearchComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    // 在这里可以进行搜索请求，例如调用API获取搜索结果
    // 以下是一个示例，你可以根据实际情况进行修改
    const search = async () => {
      try {
        const response = await fetch(`https://api.example.com/search?q=${debouncedSearchTerm}`);
        const data = await response.json();
        setSearchResults(data.results);
      } catch (error) {
        console.error(error);
      }
    };

    search();
  }, [debouncedSearchTerm]);

  const handleSearchInputChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearchInputChange} />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
};