javascript - 在 react 中多次触发反跳

Question

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

它是 react 组件的一部分。这是代码:

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 作为第三个参数，但没有更改任何内容，并且我还创建了一个带有去抖的特定函数，而不是像其他帖子中提到的那样每次都创建新的去抖。

感谢您的帮助。

Answer 1

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

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

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