Question

我尝试了很多方法，但我一直无法让 onChange 工作。我正在开发一个搜索栏组件，该组件在用户 3 秒内未更改搜索栏输入后进行 fetch 调用，但我在更改 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 具有包含“label”和“value”的对象值

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

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

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

1 个答案: