antd - 自动完成功能滞后

Question

我有一个超过 20k 值的数据源。因此，当我使用 ant design 自动完成时，它需要很长时间才能加载数据.. 我怎样才能降低自动完成加载速度并减少延迟。

我的自动完成组件工作正常，但需要降低加载速度。

<AutoComplete
     ref={this.inputElement}
     value={this.state.currentItem.text}
     dataSource={this.state.keySource}
     style={{ width: 200 }}
     onSelect={onKeywordSelect}
     onSearch={this.handleKeySearch}
     className="text-input form-control" 
     placeholder="Type any gene name, drug name.."
/>

Answer 1

如果数据源文件太大，你应该在服务器端这样做。您应该使用查询字符串让 UI 调用 api，并让服务器找到匹配的数据并将其返回。

您还可以像树一样以某种方式对 20k 数据进行排序，以便查询更快或使用数据库。