从React InstantSearch迁移至Hooks：多索引allSearchResults获取方案

要在React InstantSearch Hooks的多索引场景下实现原allSearchResults的功能，核心是通过useInstantSearch() Hook获取InstantSearch实例，进而访问所有索引的搜索结果。以下是针对你的需求的具体解决方案：

1. 核心实现逻辑 #

通过useInstantSearch()获取实例后，可从instantSearchInstance.indexes数组中提取每个索引的结果，再根据你的规则排序渲染。

2. 代码示例 #

import { useInstantSearch, Index } from 'react-instantsearch-hooks-web';

function SortedMultiIndexResults() {
  const { instantSearchInstance } = useInstantSearch();

  // 提取所有索引的结果及关键判断字段
  const allIndexesData = instantSearchInstance.indexes.map(index => ({
    indexName: index.indexName,
    results: index.results,
    // 判断首个命中是否存在fullyHighlighted字段
    hasFullyHighlightedFirstHit: index.results?.hits[0]?._highlightResult 
      ? Object.values(index.results.hits[0]._highlightResult).some(field => field.fullyHighlighted)
      : false
  }));

  // 按规则排序：优先首个命中带fullyHighlighted的索引，再按结果数量降序
  const sortedIndexes = [...allIndexesData].sort((a, b) => {
    // 高亮优先级判断
    if (a.hasFullyHighlightedFirstHit && !b.hasFullyHighlightedFirstHit) {
      return -1;
    }
    if (!a.hasFullyHighlightedFirstHit && b.hasFullyHighlightedFirstHit) {
      return 1;
    }
    // 结果数量降序
    return (b.results?.nbHits || 0) - (a.results?.nbHits || 0);
  });

  return (
    <div className="multi-index-container">
      {sortedIndexes.map(({ indexName, results }) => {
        // 仅渲染有结果的索引
        if (!results || results.nbHits === 0) return null;
        
        return (
          <div key={indexName} className="index-results">
            <h2>{indexName} ({results.nbHits} 条结果)</h2>
            <div className="hits-list">
              {results.hits.map(hit => (
                <div key={hit.objectID} className="hit-item">
                  {/* 根据你的数据结构渲染命中内容 */}
                  <h3>{hit.title}</h3>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// 在主组件中注册多索引
function App() {
  return (
    <InstantSearch
      searchClient={yourSearchClient}
      indexName="default-index"
    >
      <SearchBox />
      <Index indexName="index-1" />
      <Index indexName="index-2" />
      <SortedMultiIndexResults />
    </InstantSearch>
  );
}

3. 关键说明 #

• instantSearchInstance.indexes：包含所有通过<Index>组件注册的索引实例，每个实例的results属性对应该索引的搜索结果（结构与单索引场景的useHits返回结果一致）。
• 空结果判断：需处理results未加载或无命中的情况，避免渲染错误。
• 实时更新：当搜索关键词变化或结果更新时，instantSearchInstance会自动触发组件重渲染，排序逻辑会实时生效。

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