我有一个用React钩子编写的过滤器栏。它具有两个日历弹出窗口,用于选择开始日期和结束日期。开始日期和结束日期会自动更新useState挂钩。过滤器栏还有一个文本搜索,仅在单击按钮时提交。
当我单击文本搜索上的提交按钮时,我想按开始日期和结束日期以及文本字段过滤上下文变量。我的问题是,使用useEffect进行更改并在上下文上调用reducer操作不起作用。我只想在单击“提交”按钮时进行过滤,但是我发送到useState挂钩的文本变量有时为null,有时与上次相同。当文本更改时,UseEffect只会注册我单击了“提交”按钮。
我的代码看起来像这样:
const [searchValue, setSearchValue] = useState(null)
const searchByChars = (text) => {
console.log("SEARCH TRIGGERED", text)
setSearchValue(text)
resetData()
}
const filter = data => {
//The filtering
}
useEffect(() => {
if (data) {
dataContext.dataDispatch({type: SET_ACCOUNTS, payload: data})
}
if (searchValue) {
filter(dataContext.dataState.data)
}
}, [
data
searchValue,
])
searchByChars由子组件调用。
如何重新触发useEffect来重新触发过滤器?