我的 lodash 去抖动不适用于输入和 Reacttsx答案

【问题标题】：My debounce from lodash is not working with input and Reacttsx我的 lodash 去抖动不适用于输入和 Reacttsx
【发布时间】：2020-06-24 10:17:31
【问题描述】：

我在输入中添加了 lodash debounce，我想使用它。我用 console.logs 检查了方法，但它从未进入去抖动部分。

const debounce = require('lodash/debounce');

filterFeed(event: any){
    // event.preventDefault()
    event.persist();
    debounce(() => {
        let searchString = event.target.value;
        let unfilteredFeed: any = this.unfilteredFeed;
        let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(event.target.value.toLowerCase()));
        this.setState({ input: searchString, feed: filteredFeed, filter: true })
     }, 300);

}

 <input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={ this.filterFeed.bind(this)} /><label >Suche</label>

【问题讨论】：

标签： html reactjs debounce tsx

【解决方案1】：

您需要将传递给 onChange 的整个函数包装在 debounce 中并保存其引用：

filterFeed = (event: any) => {
  // event.preventDefault()
  event.persist();
  let searchString = event.target.value;
  let unfilteredFeed: any = this.unfilteredFeed;
  let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(event.target.value.toLowerCase()));
  this.setState({
    input: searchString,
    feed: filteredFeed,
    filter: true
  })
}

debouncedFilterFeed = debounce(this.filterFeed, 300);


<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={this.debouncedFilterFeed} /><label >Suche</label>

【讨论】：

好的，我这样做了，但后来我收到了这个错误。 “出于性能原因，此合成事件被重用。如果您看到此内容，则表示您正在访问已发布/无效合成事件的属性目标。此设置为 null。如果您必须保留原始合成事件，请使用 event .persist()。”
嗯，这很奇怪，而且你的代码中有event.persist();？

【解决方案2】：

尝试不同的方法后，我找到了解决方案：

filterFeed= debounce((text) =>{
    let searchString = text;
    let unfilteredFeed: any = this.unfilteredFeed;
    let filteredFeed: any = unfilteredFeed.filter(el => el.title.toLowerCase().includes(searchString.toLowerCase()));
    this.setState({ input: searchString, feed: filteredFeed, filter: true })
}, 20)

<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={e  => this.filterFeed(e.target.value)} /><label >Suche</label>

【讨论】：

呵呵是的，和我发布的完全一样：D
注意事项：请注意，使用此功能的用户体验非常差，因为在“延迟”期间，输入字段中没有任何内容。

【解决方案3】：

您可以使用解决方法：

filterFeed = (value) => {//Pass the value, not the event   
    let searchString = value
    let unfilteredFeed = this.unfilteredFeed;
    let filteredFeed = unfilteredFeed.filter(el => el.title.toLowerCase().includes(value.toLowerCase()));
    this.setState({
      input: searchString,
      feed: filteredFeed,
      filter: true
    })
  }

还有你的 JSX：

<input className="basic-slide" id="name" type="text" value={this.state.input} placeholder="Event..." onChange={(e)=>{
          const value = e.target.value;
          this.debouncedFilterFeed(value)
          }} /><label >Suche</label>

【讨论】：