我有一个由对象组成的数组,长度为5866,格式如下:{label: "Luke Skywalker", value: "556534"}
,我正在按照标签搜索并过滤这些对象,如下:
onChange = (e) => {
e.persist()
this.setState({filter:e.target.value, filtered_array:
this.state.raw_user_list.filter(user =>
user.label.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)})
}
...
<form style={{paddingBottom:'10px'}}>
Filter: <input name="filter" value={this.state.filter} onChange={this.onChange} type="text" style={{
border: '1px solid #cccccc',
}}/>
</form>
this.state.filter
是正在输入筛选条件的值。
在最初我处理少于1,000个条目时没有问题,但现在使用 user_list
的 5,866个条目会导致性能问题。我希望实现实时数据筛选,当用户输入时进行筛选。
e.target.value.toLowerCase()
,将其存储在作用域变量中,并从迭代函数中引用它。这是一个简单的修复方法,应该可以立即看到效果。 - Patrick RobertsonChange
与连续输入有关,一些限流会有所帮助。 - charlietflfiltered_array
的子集,您无需再次对整个raw_user_list
进行筛选。 - Thomas