在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

只需在 useEffect-function 中检查一个 if 语句：

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