Lodash _.debounce不会在React中再次调用该函数时取消现有的计时器

Question

我正在尝试消除React组件中表单的onChange事件。我计划将debounceStateUpdate移到静态utils函数中以通用去抖动时间，这就是为什么存在额外的层而不是直接使用_.debounce的原因。

const ProfileGeneralEditContent = props => {
    const debounceStateUpdate = updateFunction => {
        return _.debounce(params => updateFunction(params), 700);
    };

    const FormsyFieldUpdated = debounceStateUpdate((config) => {
        console.log("update some things here");
    });

    return (
        <Formsy
            onChange={(config) => {
                FormsyFieldUpdated.cancel();
                FormsyFieldUpdated(config);
            }}
            onInvalid={() => setValid(false)}
            onValid={() => setValid(true)}
        >
            <div className={'flex justify-start items-start'}>
            .
            .
            . (more jsx)
我认为当onChange事件触发时，cancel()调用将取消所有正在运行的现有防抖动计时器，并开始一个新的防抖动计时器。

我的目标是从每次按键更新状态中消除输入的反跳，因此状态只会在无更新的700ms之后更新。但是目前，此代码仅将每次按键的状态更新延迟700毫秒，并且每次按键的状态更新仍在进行。

我如何使用_.debounce保持单个运行的防抖动计时器来延迟状态更新，而不是让每个按下的键一次运行10个计时器？

我正在尝试消除React组件中表单的onChange事件。我计划将debounceStateUpdate移到静态utils函数中以通用化去抖动时间，这就是为什么...

Answer 1

我知道了。我需要将已去抖动的函数定义包装在useCallback()中，因为组件的重新渲染在每次按键时都重新定义了已去抖动的函数，因此它将不了解其先前迭代的运行功能。