如何为BlueprintJS Select组件使用异步数据源？

问题背景 #

官方为Select组件提供的过滤方案是使用itemListPredicate事件处理器，但它的类型签名限制了只能做同步过滤：

export declare type ItemListPredicate<T> = (query: string, items: T[]) => T[];

这个设计只能从前端已有的固定列表里即时筛选结果，完全适配不了大数据集场景——总不能把上万条数据全拉到前端来做搜索吧？我需要的是把用户输入的查询发送到服务器，等服务器返回匹配结果（可能是全新的列表）再展示，但itemListPredicate完全不支持异步操作，直接卡住了。

初期尝试的变通思路 #

我一开始想了个绕路的办法：

• 当itemListPredicate被调用时，先把当前的查询字符串保存到组件的本地状态
• 给查询操作加防抖处理避免频繁请求，再异步发送查询到服务器并等待响应
• 拿到服务器返回的结果后，直接修改Select组件的items属性

但当时我误以为修改items会自动关闭弹出的Popover，觉得这个方案没法做实时搜索体验。甚至还动过换成React-Select的念头，但实在舍不得BlueprintJS全套的生态集成——统一的尺寸规范、主题样式、图标体系还有意图色这些，换组件的话要适配的东西太多了。

关键修正：方案可行！ #

后来排查发现是我搞错了：修改items属性并不会关闭Popover，之前的弹窗消失是因为其他操作导致了整个Select组件的重渲染。现在确认这个变通方案是完全可行的，等我完成测试后会把完整的可运行代码解决方案分享出来。

内容的提问来源于stack exchange，提问作者nagylzs