Question

这是我的用例，一个带有文本输入的简单React组件，用于过滤列表中的元素：

const myArray = [...];

// Inside React component:

handleChange = ({target: {value}}) => this.setState({value});

render() {
  return (
    <div>
      <input onChange={this.handleChange} value={this.state.value} />
      <ul>
        {myArray.filter(v => v.includes(this.state.value)).map(v => <li>{v}</li>)}
      </ul>
    </div>
  );
}

使用此代码，每次我更改输入内的文本时，列表中的元素会立即更改。

我想要实现的目标：用户在过滤器文本中键入，文本在文本输入中立即更新（正常），但我希望列表中的元素不立即更新，但是让我们说用户完成输入后的500ms。

基本上是这样的：

用户类型，<input>内的文字更新，列表元素不
用户停止输入，500ms后，列出元素更新

编辑：

我尝试了什么：

import throttle from 'lodash/throttle';
const myArray = [...];

// Inside React component:

handleChange = ({target: {value}}) => this.setState({value});

calculateMatches = throttle(() => {
  const matches = myArray.filter(v => v.includes(this.state.value))
  return matches;
}, 500);

render() {
  return (
    <div>
      <input onChange={this.handleChange} value={this.state.value} />
      <ul>
        {this.calculateMatches().map(v => <li>{v}</li>)}
      </ul>
    </div>
  );
}

但这会限制每500毫秒，所以如果用户继续键入1600毫秒，它将重新更新列表3次。

React中的Throttle派生状态

0 个答案: