在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),
  []
)