algolia Instantsearch 仅显示与特定查询匹配的结果（反应）答案

【问题标题】：algolia instantsearch only show result that matches particular query (react)algolia Instantsearch 仅显示与特定查询匹配的结果（反应）
【发布时间】：2021-10-17 04:08:33
【问题描述】：

我正在使用反应即时搜索在选择选项中显示用户列表。我设法在选择选项中显示所有用户，但我只想显示具有管理员角色的用户（角色 === 'admin'）。

当然，我可以在客户端通过过滤角色命中来做到这一点，但在那里有什么方法可以通过反应即时搜索来实现这一点？

这就是我向所有用户展示的方式。

AlgoliaProvider.js


import React from "react";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch } from "react-instantsearch-dom";

const searchClient = algoliasearch(
  process.env.REACT_APP_ALGOLIA_APP_ID,
  process.env.REACT_APP_ALGOLIA_SEARCH_KEY
);

const AlgoliaProvider = ({ indexName, children, ...rest }) => {
  return (
    <InstantSearch indexName={indexName} searchClient={searchClient} {...rest}>
      {children}
    </InstantSearch>
  );
};

export default AlgoliaProvider;

AutoCompleteSelect.js

import React from 'react';
import {  Select } from 'antd';
import { connectAutoComplete } from 'react-instantsearch-dom';

const { Option } = Select;

const AutoCompleteSelect = ({
  hits,
  refine,
  ...rest
}) => {
  const handleSuggestion = value => {
    refine(value);
  };

    return (
      <Select showSearch onSearch={handleSuggestion} {...rest}>
        {hits.map(user => (
          <Option
            key={user.uid}
            value={user.uid}
          >
            <span>{user.name}</span>
          </Option>
        ))}
      </Select>
    );
 
};

export default connectAutoComplete(AutoCompleteSelect);

App.js

 <AlgoliaProvider indexName="User">             
   <AutoCompleteSelect placeholder="user search" />
 </AlgoliaProvider>

【问题讨论】：

标签： javascript reactjs algolia instantsearch react-instantsearch

【解决方案1】：

使用Searchstate

<InstantSearch
    ....
    searchState={{
        role: 'admin',
    }}
}}

【讨论】：

这似乎是我需要的，但添加后出现错误。未捕获的错误：您无法在 InstantSearch.componentDidUpdate 处将从不受控制切换到受控制。
github.com/algolia/react-instantsearch/issues/1113
谢谢。我设法修复了这个错误。但是角色：'admin' 部分似乎不起作用。我也尝试使用过滤器：'role:admin'，但还是一样。 searchState={{ query: 'some query', }} 有效，但这不是我需要的。你能告诉我你在哪里得到了 searchState={{ role: 'admin', }} 部分吗？
algolia.com/doc/api-reference/widgets/instantsearch/react/…

【解决方案2】：

您需要分面功能来实现这一点。在此处阅读更多信息：https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/

我已经通过 UI（algolia 前端）配置了一个这样的方面，然后我在 InstantSearch 中像这样使用它：

<InstantSearch searchClient={.... >

<Configure
   hitsPerPage={<Number>}
   filters={`role:${user.role}`} />
...
...
</InstantSearch>

查看代码中的过滤器部分，需要将“角色”作为构面添加到配置中（通过 ui 或代码）。

【讨论】：