Javascript （React Select hooks）如何使用Select的onChange render prop更新状态？

我试过好几种方法，但都没能成功。我正在开发一个搜索栏组件，该组件在用户3秒钟内未更改搜索栏输入后进行提取调用，但我在更改userSearchInput状态钩子时遇到问题，该钩子在useEffect中触发api调用。以下是代码的最小化版本：

    import React, { useState, useEffect } from "react";
import Select from "react-select";

export default function SearchBar() {
  const [userSearchInput, setUserSearchInput] = useState("");
  const [searchSuggestions, setSearchSuggestions] = useState([]);

  useEffect(() => {
    const searchSuggestions = async (searchInput) => {
      console.log("api called");
      const searchSuggestions = await fetch(
        'API STUFF'
      )
        .then((response) => response.json())
        .then((data) => {
          setSearchSuggestions(data.quotes);
        });
    };

    const timer = setTimeout(() => {
      if (userSearchInput !== "") {
        searchSuggestions("test");
      }
    }, 3000);
    return () => clearTimeout(timer);
  }, [userSearchInput]);

  const handleSearchInputChange = (event) => {
    setUserSearchInput(event.target.value);
    console.log("input changed");
  };

  return (
    <Select
      options={searchSuggestions}
      value={userSearchInput}
      placeholder="Search a ticker"
      onChange={handleSearchInputChange}
    />
  );
}

---

知道我哪里出错了吗？

选择具有包含标签和值的对象的值

另外，react select已经在函数的参数中返回了值，所以您所要做的就是使用它

const handleSearchInputChange = (selectedOptionObj) => {
    setUserSearchInput(selectedOptionObj);
    console.log("input changed");
  };