（React-Select 钩子）如何使用 Select 的 onChange 渲染道具更新状态？

Question

我已经尝试了很多方法，但我无法让 onChange 起作用。我正在开发一个搜索栏组件，该组件在用户 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}
    />
  );
}

关于我哪里出错的任何想法？

Answer 1

select 具有包含“标签”和“值”的对象的值

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

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

（React-Select 钩子）如何使用 Select 的 onChange 渲染道具更新状态？

(React-Select hooks) How can I update state using Select's onChange render prop?

javascript

reactjs

react-select

react-hooks