Question

我已经尝试了很多方法，但我无法通过 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)，控制台也不会登录任何内容。

Answer 1

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

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

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

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

(React-Select hooks) 状态在 React-Select onChange 道具处理时不会改变

1 个答案: