在反应中多次触发去抖动

Question

我正在努力解决所谓的简单去抖动问题。但不知何故，它不是等待和触发一次，而是等待但触发所有事件，直到最后一个。

它是反应组件的一部分。这是代码：

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}

它等待一点（三秒钟），然后将显示三个连续的 console.log，其中包含值“a”、“ab”、“abc”。我的期望是它只用“abc”触发一次。我想知道我在哪里遗漏了什么。试图添加 true 作为第三个参数，但没有改变任何东西，我还在创建一个带有 debounce 的特定函数，而不是像其他帖子中提到的那样每次都创建一个新的 debounce。

谢谢你的帮助。

Answer 1

在每次重新渲染时都会重新创建去抖动函数。

您将需要将其包装在useCallback其中，除非依赖项数组中的变量之一发生更改，否则它将包含相同的引用

const changeFilterDebounced = useCallback(
  debounce(value => console.log(value), 3000, true),
  []
)