跳过使用React Bootstrap AsyncTypeahead进行内部过滤吗?

时间:2019-07-02 14:21:17

标签: reactjs react-bootstrap-typeahead

我正在使用AsyncTypeahead来查询GraphQL后端,除了一个小的视觉故障外,其他所有东西都在工作。非异步版本旨在在用户键入时过滤下拉菜单中的固定选项列表。但是对于异步版本,后端查询会进行过滤,因此我不需要在前端进行过滤。

问题在于,在发送查询之后但在返回新结果之前,已过滤并重新渲染显示的菜单。这会在等待结果时导致不必要的,令人误解的UI更新。

例如,假设您要搜索食品杂货。用户键入“ ba”并看到

  • 发酵粉
  • 香蕉
  • 燕麦棒

他们改变主意,删除“ ba”并键入“ s”,然后发送新的查询。但是在结果返回之前,UI会将现有列表(包含“ ba”的项目)过滤到包含“ s”的项目并显示

  • 香蕉
  • 燕麦棒

一旦返回完整结果,用户界面将再次更新以显示所有包含“ s”的内容。

  • 香蕉
  • 燕麦棒
  • 洗发水
  • 剃须膏

当异步查询提供新结果(在组件中称为options)时,如何通过UI仅更新 来消除这种闪烁?

0 个答案:

没有答案