如何使用Algolia InstantSearch Hook按objectID数组搜索？

React InstantSearch Hooks版本不再支持旧组件的searchState属性，要实现指定特定objectID的查询，你可以通过以下两种方式完成：

方式一：使用<Configure>组件直接配置 #

通过<Configure>组件传递objectIDs参数，这是最简洁的静态配置方式：

import { InstantSearch, Configure } from 'react-instantsearch-hooks-web';

<InstantSearch indexName={indexName} searchClient={algoliaClient}>
  <Configure 
    clickAnalytics 
    objectIDs={["80066451052", "50090402178"]} 
  />
  {children}
</InstantSearch>

方式二：通过useInstantSearch钩子动态设置 #

如果需要动态修改查询参数（比如根据用户操作更新objectID列表），可以使用useInstantSearch钩子来操作索引的查询参数：

import { InstantSearch, Configure, useInstantSearch } from 'react-instantsearch-hooks-web';
import { useEffect } from 'react';

function ObjectIDFilter() {
  const { setIndex } = useInstantSearch();

  useEffect(() => {
    setIndex((prevIndex) => 
      prevIndex.setQueryParameters({
        objectIDs: ["80066451052", "50090402178"]
      })
    );
  }, [setIndex]);

  return null;
}

// 在InstantSearch中使用该组件
<InstantSearch indexName={indexName} searchClient={algoliaClient}>
  <Configure clickAnalytics />
  <ObjectIDFilter />
  {children}
</InstantSearch>

说明 #

• 直接使用objectIDs参数是Algolia官方推荐的获取特定文档的方式，比在query中拼接objectID:语法更高效且符合API规范。
• <Configure>组件支持传递所有Algolia搜索API支持的参数，可根据需求扩展配置。

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