在Reaction中多次触发去弹跳 [英] Debounce triggering multiple times in react
本文介绍了在Reaction中多次触发去弹跳的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在努力应对本应是简单的揭穿。但不知何故,它不是等待并触发一次,而是一个接一个地等待,直到最后一个事件。
它是Reaction组件的一部分。代码如下:
import debounce from "lodash.debounce";
(...)
export default () => {
const { filter, updateFilter } = useContext(AppContext);
const [searchString, setSearchString] = useState(filter.searchString);
const changeFilter = value => {
console.log(value);
};
const changeFilterDebounced = debounce(changeFilter, 3000, true);
const handleChange = e => {
let { value } = e.target;
setSearchString(value);
changeFilterDebounced(value);
};
(...)
因此,如果我在输入中键入类似"abc"的内容,则会得到
onChange={handleChange}
它等待一段时间(三秒钟),然后将显示连续三个值为"a"、"ab"、"abc"的console.log。我的期望是它只会用"abc"触发一次。我想知道我遗漏了什么。尝试添加True作为第三个参数,但没有更改任何内容,并且我还创建了一个带有DECBESS的特定函数,以不像其他帖子中提到的那样每次都创建一个新的DECBAKE。
感谢您的帮助。
推荐答案
每次重新呈现时都会重新创建取消声明的函数。
您需要将其包装在useCallback
中,该useCallback
将保存相同的引用,除非依赖数组中的某个变量发生更改
const changeFilterDebounced = useCallback(
debounce(value => console.log(value), 3000, true),
[]
)
这篇关于在Reaction中多次触发去弹跳的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文