（React-Select 钩子）状态在 React-Select onChange 道具处理时没有改变答案

【问题标题】：(React-Select hooks) state not changing when React-Select onChange prop handling（React-Select 钩子）状态在 React-Select onChange 道具处理时没有改变
【发布时间】：2021-07-04 16:41:52
【问题描述】：

我尝试了很多方法，但我无法通过 onChange 更新 userSearchSuggestion 状态。我正在开发一个搜索栏组件，该组件在用户未更改搜索栏输入 3 秒后进行 fetch 调用，但似乎在将文本添加到组件时 onChange 根本没有触发。代码如下：

    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(userSearchInput);
      }
    }, 3000);
    return () => clearTimeout(timer);
  }, [userSearchInput]);

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

关于为什么 onChange 不更新状态的任何想法？即使我只是在 onChange 上使用 console.log(e)，也没有任何内容记录到控制台中。

【问题讨论】：

标签： javascript reactjs react-hooks react-select

【解决方案1】：

如果您想在用户输入 Select 输入时调用 API，请使用 onInputChange 而不是 onChange。

当您想在用户选择某些内容时执行某些代码时，请使用 onChange。
当您想在用户键入内容时执行某些代码时，请使用 onInputChange。

<Select onInputChange={(input) => console.log(input)}

我还看到您希望在用户键入时稍微延迟 API 调用。这是一个很好的做法，但传统的做法是使用debounce 或throttle。你可以看到他们之间的不同here。

【讨论】：