如何在带有react钩子的输入搜索框中显示下拉列表项？

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

const SearchDropdown = () => {
  const [inputValue, setInputValue] = useState('');
  const [dropdownItems, setDropdownItems] = useState([]);
  const [showDropdown, setShowDropdown] = useState(false);

  // 监听inputValue的变化，获取下拉列表的数据
  useEffect(() => {
    // 根据输入的值从后端获取下拉列表的数据，并更新dropdownItems状态变量
    // 示例代码：
    const fetchDropdownItems = async () => {
      // 发起API请求，获取下拉列表的数据
      const response = await fetch('/api/search?q=' + inputValue);
      const data = await response.json();
      setDropdownItems(data);
    };

    // 避免首次渲染时触发API请求
    if (inputValue !== '') {
      fetchDropdownItems();
    }
  }, [inputValue]);

  // 处理输入搜索框值的变化
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
    setShowDropdown(true);
  };

  // 处理下拉列表项的点击事件
  const handleDropdownItemClick = (item) => {
    setInputValue(item);
    setShowDropdown(false);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      {showDropdown && (
        <ul>
          {dropdownItems.map((item, index) => (
            <li key={index} onClick={() => handleDropdownItemClick(item)}>
              {item}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default SearchDropdown;