Question

我正在创建带有输入按钮和清除按钮的搜索输入。单击提交按钮时，它将触发具有可用输入值的搜索请求。单击清除按钮时，也会触发一个空值的搜索请求。我尝试在useEffect依赖项数组中使用比较，以在搜索值为空时触发效果，以适应清除按钮。

const Test = ({ doGetData }) => {
  const [status, setStatus] = useState(null);
  const [activePage, setActivePage] = useState(1);
  const [term, setTerm] = useState("");

  const handleFilter = () => {
    const query = {
      page: activePage,
      q: term,
      active: status
    };
    doGetData(query);
  };

  useEffect(() => {
    handleFilter();
  }, [status, activePage, term === ""]);

  const setEmptySearch = () => setTerm("");

  const handleInputChange = e => {
    const { value } = e.currentTarget;
    setTerm(value);
  };

  return (
    <SearchInput
      handleFilter={handleFilter}
      handleDismissSearch={setEmptySearch}
      handleInputChange={handleInputChange}
      status={status}
      term={term}
    />
  );
 };

当我单击搜索按钮，单击清除按钮以及手动删除输入时效果很好，但是唯一的问题是当我输入第一个字母时，它将触发搜索。你能帮我吗？

Answer 1

只需在useEffect-function中使用if语句进行检查：

useEffect(() => {
  if(term === "") {
    handleFilter();
  }
}, [status, activePage, term]);

在useEffect的依赖项数组中使用比较

1 个答案: