升级react-instantsearch至v7后默认筛选功能失效求助

以下是几个核心问题的修复方案：

1. initialUiState 的索引键错误 #

你代码里直接用字符串indexName作为对象键，但这里必须使用实际的索引名称变量，需要用方括号包裹变量来动态生成键：

// 错误写法
initialUiState={{
  indexName: { ... }
}}

// 正确写法
initialUiState={{
  [process.env.NEXT_PUBLIC_ALGOLIA_INDEX!]: {
    refinementList: {
      // 筛选条件
    }
  }
}}

2. refinementList 的值格式错误 #

v7 中，refinementList 的默认值不能用null，需用空数组[]表示不选择任何筛选项；同时要明确指定对应属性名：

refinementList: {
  type: type === 'all' ? [] : (type === 'courses' ? ['filter_1', 'filter_2'] : [])
}

3. 排查 Configure 组件的冲突 #

你保留了<Configure facetFilters={determineFacetFilters()} />，如果determineFacetFilters()也返回了type相关的筛选条件，会和initialUiState的设置冲突。要么移除Configure中重复的facetFilters配置，要么确保两者逻辑一致。

4. 自定义组件的 Hook 使用问题 #

在AlgoliaSearchResults中，useInstantSearch()返回的是InstantSearch实例，并非直接包含搜索结果。应该改用useResults() Hook来获取结果数据：

import { useResults } from 'react-instantsearch';

const connectStateResults = (Component: JSXElementConstructor<any>) => {
  const SearchResults = (props: any) => {
    const results = useResults();
    return <Component {...props} results={results} />;
  };
  return SearchResults;
};

修正后的完整 InstantSearch 示例 #

<InstantSearch
  indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX!}
  searchClient={algoliaClient}
  initialUiState={{
    [process.env.NEXT_PUBLIC_ALGOLIA_INDEX!]: {
      refinementList: {
        type: type === 'all' ? [] : (type === 'courses' ? ['filter_1', 'filter_2'] : [])
      },
      hitsPerPage: hitsPerPage
    },
  }}
>
  {/* 其他组件 */}
  <RefinementList attribute="type" />
</InstantSearch>

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