更改输入值时去抖动作

Question

我正在尝试在 Input 元素的值更改时消除动作。此操作由 saga 捕获并发出 HTTP 请求。首先，我尝试这样做：

<Input
  name='name'
  value={this.props.finish.name}
  placeholder='Ex: My application'
  onChange={event => this.saveAppName(event.target.name, event.target.value)}
/>

private saveAppName = debounce((name: string, value: string) => {
  if (value.length) {
    this.props.dispatch(changeInputFinish({name, value}));
  }
}, 500);

上面的解决方案有效，但我无法快速输入输入。如果我这样做，那么输入不会捕获所有内容。

之后，我尝试将 "saveAppName" 方法更改为：

private saveAppName = (name: string, value: string) => {
  if (value.length) {
    debounce(this.props.dispatch(changeInputFinish({name, value})), 500);
  }
}

上面的代码允许我在 Input 元素中尽可能快地键入任何内容，但最终检索到错误并使应用程序崩溃。显示的错误是 "TypeError: Expected a function"。这是 lodash debounce 的错误。它需要一个函数，但动作 "changeInputFinish({name, value})" return 是一个动作对象而不是函数。

为了尝试解决这个问题，我尝试使用以下代码使操作 return 成为一个新函数而不是操作对象：

private saveAppName = (name: string, value: string) => {
  if (value.length) {
    debounce(() => this.props.dispatch(changeInputFinish({name, value})), 500);
  }
}

上面的代码没有检索到任何错误，但它不允许我在输入中输入任何内容，所以我不知道它是否真的是解决方案。

有谁知道我该如何解决这个问题？基本上，我需要消除由发出 http 请求的 saga 捕获的动作。因为我正在尝试提高 HTTP 请求的性能，所以我应该尝试在我的 saga 上而不是在我的组件上去抖动吗？

谢谢。

Answer 1

你需要传递debounce返回的函数：

handleChange = event => _.debounce(() => {
    this.saveAppName(event.target.name, event.target.value)
}, 150);

...

<Input
  name='name'
  value={this.props.finish.name}
  placeholder='Ex: My application'
  onChange={this.handleChange}
/>

蒂姆

P.S。将内联闭包作为 prop 发送给子组件是一种反模式，因为它们会在每次渲染时重新创建，从而强制重新渲染子组件（因为 props 会发生变化）。您应该创建一次函数，然后每次都传递相同的函数，就像我在这里所做的那样。

更改输入值时去抖动作

Debouncing an action when changing Input value

reactjs

redux

react-redux

debounce