React Instant Meilisearch：如何在用户输入前隐藏数据？

要实现仅在用户输入搜索内容时展示结果，核心是判断搜索框的输入状态，仅当存在有效搜索词时才渲染结果组件。下面提供两种可行的实现方式：

方法1：使用useInstantSearch钩子（推荐，React Hooks版本） #

通过useInstantSearch钩子获取当前的搜索状态，判断query是否为空，为空则不渲染InfiniteHits：

import {
  InstantSearch,
  InfiniteHits,
  SearchBox,
  Stats,
  Highlight,
  useInstantSearch, // 导入状态钩子
} from "react-instantsearch-dom";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

const searchClient = instantMeiliSearch("http://127.0.0.1:7700", "");

const Search = () => {
  const { searchState } = useInstantSearch();
  // 判断是否有非空的搜索词
  const hasValidQuery = searchState?.query?.trim().length > 0;

  return (
    <div className="ais-InstantSearch">
      <InstantSearch indexName="blogpost" searchClient={searchClient}>
        <SearchBox />
        {/* 仅当存在有效搜索词时，才渲染结果列表 */}
        {hasValidQuery && <InfiniteHits hitComponent={Hit} />}
      </InstantSearch>
    </div>
  );
};

const Hit = ({ hit }) => (
  <div key={hit.id}>
    <div className="hit-title">
      <Highlight attribute="title" hit={hit} />
    </div>
  </div>
);
export default Search;

方法2：使用connectSearchState高阶组件（兼容类组件场景） #

如果你的项目使用类组件，或更习惯高阶组件的写法，可以用connectSearchState将搜索状态注入组件：

import {
  InstantSearch,
  InfiniteHits,
  SearchBox,
  Stats,
  Highlight,
  connectSearchState, // 导入高阶组件
} from "react-instantsearch-dom";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

const searchClient = instantMeiliSearch("http://127.0.0.1:7700", "");

const SearchComponent = ({ searchState }) => {
  const hasValidQuery = searchState?.query?.trim().length > 0;

  return (
    <div className="ais-InstantSearch">
      <InstantSearch indexName="blogpost" searchClient={searchClient}>
        <SearchBox />
        {hasValidQuery && <InfiniteHits hitComponent={Hit} />}
      </InstantSearch>
    </div>
  );
};

// 用高阶组件包裹，注入搜索状态
const Search = connectSearchState(SearchComponent);

const Hit = ({ hit }) => (
  <div key={hit.id}>
    <div className="hit-title">
      <Highlight attribute="title" hit={hit} />
    </div>
  </div>
);
export default Search;

逻辑说明 #

两种方法的核心逻辑一致：通过searchState.query判断用户是否输入了有效搜索词（过滤纯空格的无效输入），仅满足条件时才渲染结果组件。这是因为InstantSearch默认会执行空搜索返回所有数据，通过前端条件渲染可以直接覆盖这个默认行为。

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