React项目中Algolia SearchBox的queryHook属性报错：search不是函数

首先，你的错误根源是对queryHook的参数结构理解有误——它接收的是单个对象参数，而非两个独立的query和search参数。你现在的写法把第二个参数当成了search，但实际上这个位置的变量是undefined，自然会抛出“search is not a function”的错误。

修正后的queryHook写法 #

正确的queryHook应该通过解构对象来获取search方法：

const queryHook = ({ query, search }) => {
  search(query);
};

function Search() {
  return <SearchBox queryHook={queryHook} />;
}

实现搜索建议功能的完整思路 #

如果要在搜索栏下方展示可点击的搜索建议，仅靠queryHook不够，还需要结合Algolia的相关组件实现：

方式1：使用Autocomplete组件（推荐） #

它内置了建议列表渲染、点击选中填入搜索框的逻辑，无需手动处理太多细节：

import { Autocomplete } from '@algolia/autocomplete-react';
import { useInstantSearch } from 'react-instantsearch-hooks-web';

function Search() {
  const { index } = useInstantSearch();

  return (
    <Autocomplete
      getSources={() => [
        {
          sourceId: 'images',
          getItems({ query }) {
            return index.search(query, { hitsPerPage: 5 });
          },
          templates: {
            item({ item }) {
              return <div onClick={() => document.querySelector('input[aria-label="Search"]').value = item.title}>{item.title}</div>;
            },
          },
        },
      ]}
      renderInput={({ getInputProps }) => (
        <input {...getInputProps({ placeholder: '搜索图片...' })} />
      )}
    />
  );
}

方式2：结合SearchBox与Hits组件（基础版） #

如果想基于现有的SearchBox，可以用Hits组件展示建议结果，再通过状态控制搜索框内容：

import { SearchBox, Hits } from 'react-instantsearch-hooks-web';
import { useState } from 'react';

function Search() {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div>
      <SearchBox 
        query={searchQuery}
        onQueryChange={setSearchQuery}
      />
      <Hits
        hitsPerPage={5}
        hitComponent={({ hit }) => (
          <div onClick={() => setSearchQuery(hit.title)} style={{ cursor: 'pointer', padding: '8px' }}>
            {hit.title}
          </div>
        )}
      />
    </div>
  );
}

关键注意点 #

• queryHook的核心作用是拦截搜索请求时机（比如防抖、修改搜索词后再触发搜索），不是直接用来实现建议列表的。
• 确保你的React InstantSearch版本与使用的API匹配，不同版本的参数可能有差异。

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