Использование сравнения в массиве зависимостей useEffect

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

Просто проверьте с помощью оператора if внутри вашей функции useEffect:

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