reactjs - 如何在索引结果为零时停止索引显示在自动完成搜索栏中，使用 Algolia 进行多索引搜索？

Question

在下图中，仍然显示“扇区”。即使结果为零。当没有结果时，我想删除该特定类别。

我尝试了不同的解决方案，例如使用点击数并计算它们，但这也不起作用。处理此问题的最佳方法是什么。

在不改变我的 Algolia 指数结构的情况下

这是我正在使用的代码。

<InstantSearch
                  indexName="Companies"
                  searchClient={searchClient}
                  value={query}
                  onChange={(e) => console.log(e.target.value)}
                >
                  <Configure hitsPerPage={3} />
                  <AutoComplete
                    onSuggestionSelected={(
                      event,
                      { suggestion, suggestionValue }
                    ) => {}}
                  />
                  <Index indexName="Sectors" >
                    {/* <Hits /> */}
                  </Index>
                  <Index indexName="Companies"></Index>
                  <Index indexName="Sub Sector"></Index>
                  <Index indexName="Users"></Index>
                </InstantSearch>

自动完成文件

import { Component } from 'react';
import PropTypes from 'prop-types';
import { connectAutoComplete } from 'react-instantsearch-dom';
import AutoSuggest from 'react-autosuggest';
import './SearchBar.css';
import { withRouter } from 'react-router-dom';

class AutoComplete extends Component {
  static propTypes = {
    hits: PropTypes.arrayOf(PropTypes.object).isRequired,
    currentRefinement: PropTypes.string.isRequired,
    refine: PropTypes.func.isRequired,
    onSuggestionSelected: PropTypes.func.isRequired,
  };

  state = {
    value: this.props.currentRefinement,
  };

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue,
    });
  };

  onSuggestionsFetchRequested = ({ value }) => {
    this.props.refine(value);
  };

  onSuggestionsClearRequested = () => {
    this.props.refine();
  };

  getSuggestionValue(hit) {
    return hit.Name;
  }

  renderSuggestion = (hit) => {
    const { history } = this.props;
    let parameter = '';
    if (hit.category == 'Organizations') {
      parameter = hit.Ticker;
    } else if (hit.category == 'Sectors') {
      parameter = hit.objectID;
    } else if (hit.category == 'Analyst') {
      parameter = hit.objectID;
    } else if (hit.category == 'subSectors') {
      parameter = hit.secId;
    }

    let route = '';
    if (hit.category == 'Organizations') {
      route = 'dashboard';
    } else if (hit.category == 'Sectors') {
      route = 'sector';
    } else if (hit.category == 'Analyst') {
      route = 'expert';
    } else if (hit.category == 'subSectors') {
      route = 'sector';
    }

    return (
      <p
        onClick={() => {
          route && parameter && history.push(`/${route}/${parameter}`);
        }}
        className="searchResult"
      >
        {hit.Name}
      </p>
    );
  };

  renderSectionTitle(section) {
    return section.index;
  }

  getSectionSuggestions(section) {
    return section.hits;
  }

  render() {
    const { hits, onSuggestionSelected } = this.props;
    const { value } = this.state;

    const inputProps = {
      placeholder: '   Search for Anything...',
      onChange: this.onChange,
      value,
    };

    return (
      <AutoSuggest
        suggestions={hits}
        multiSection
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        onSuggestionSelected={onSuggestionSelected}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
        renderSectionTitle={this.renderSectionTitle}
        getSectionSuggestions={this.getSectionSuggestions}
      />
    );
  }
}

export default withRouter(connectAutoComplete(AutoComplete));