首先，我鼓励您在不使用模糊包层的情况下完成所有这些操作。这将帮助您真正了解流程，但是，以下是在输入更改时调用函数的方法：

• 去抖动（仅在用户停止输入 500 毫秒时执行一次）
• 节流阀（批处理然后每 500 毫秒执行一次）
• 正常（在每次输入更新时执行）

在这种情况下，我只是在渲染方法之外创建了一个去抖动函数。当使用类而不是钩子时，这会有所不同：

挂钩：

const handleSearch = debounce(searchText => { ... }, 500);

类（或者您可以去抖动 中的类字段constructor，两者都可以工作）：

class Example extends Component {
  handleSearch = debounce(searchText => { ... }, 500)

  render = () => { ... }
}

工作示例 （在代码沙盒控制台打开时键入）：

去抖动、节流和正常执行之间的区别：

与上面相同，减去react-final-form和react-final-form-listeners（项目中少两个依赖项！）：

工作示例（在代码沙盒控制台打开时键入）：

您的解决方案存在多个问题：

• 使用 lodashdebounce而不是throttle.
• 在表单之外创建去抖动函数，以防止在每次重新渲染或更改时重新分配
• 调用表单提交操作，而不是提交处理程序 handleSubmit

修改并运行您的示例：