如何使用React Instant Search/InstantSearch.js实现无UI的Algolia搜索并存储结果？

React InstantSearch 实现方式 #

方法1：使用useSearchResults钩子（推荐） #

借助官方提供的钩子获取实时搜索结果，将其存入组件自定义状态数组：

import React, { useState, useEffect } from 'react';
import { InstantSearch, useSearchResults, SearchBox } from 'react-instantsearch-hooks-web';
import algoliasearch from 'algoliasearch';

const searchClient = algoliasearch('你的APP_ID', '你的SEARCH_API_KEY');

function SearchComponent() {
  const [searchResults, setSearchResults] = useState([]);
  const { results } = useSearchResults();

  useEffect(() => {
    if (results?.hits) {
      // 将搜索结果的命中项存入自定义数组
      setSearchResults([...results.hits]);
      // 可在此添加结果处理逻辑，比如过滤、转换格式等
      console.log('当前搜索结果:', results.hits);
    }
  }, [results]);

  return (
    <InstantSearch searchClient={searchClient} indexName="你的索引名">
      {/* 保留搜索框触发搜索，无需渲染任何结果展示组件 */}
      <SearchBox />
    </InstantSearch>
  );
}

export default SearchComponent;

方法2：直接调用searchClient手动搜索 #

若不需要依赖InstantSearch的自动状态管理，可直接用Algolia客户端发起搜索请求：

import React, { useState } from 'react';
import algoliasearch from 'algoliasearch';

const searchClient = algoliasearch('你的APP_ID', '你的SEARCH_API_KEY');

function ManualSearchComponent() {
  const [searchResults, setSearchResults] = useState([]);
  const [query, setQuery] = useState('');

  const handleSearch = async () => {
    if (!query.trim()) return;
    const response = await searchClient.search([
      {
        indexName: '你的索引名',
        query: query,
        // 可添加额外搜索参数，如filters、hitsPerPage等
      }
    ]);
    // 将结果存入数组
    setSearchResults(response.results[0].hits);
    console.log('手动搜索结果:', response.results[0].hits);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="输入搜索关键词"
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

export default ManualSearchComponent;

InstantSearch.js 实现方式 #

通过自定义widget监听搜索结果变化，将结果存入全局数组：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.19.0/dist/algoliasearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.59.0/dist/instantsearch.production.min.js"></script>
</head>
<body>
  <input id="search-box" placeholder="输入搜索关键词" />

  <script>
    const searchClient = algoliasearch('你的APP_ID', '你的SEARCH_API_KEY');
    let searchResultsArray = []; // 用于存储结果的数组

    const search = instantsearch({
      indexName: '你的索引名',
      searchClient,
    });

    // 添加搜索框组件触发搜索
    search.addWidgets([
      instantsearch.widgets.searchBox({
        container: '#search-box',
      }),
      // 自定义widget监听结果更新
      {
        init() {},
        render({ results }) {
          if (results?.hits) {
            searchResultsArray = [...results.hits];
            console.log('搜索结果数组:', searchResultsArray);
            // 可在此添加后续业务逻辑
          }
        },
      },
    ]);

    search.start();
  </script>
</body>
</html>

注意事项 #

• 替换代码中的你的APP_ID、你的SEARCH_API_KEY和你的索引名为实际的Algolia凭据
• 上述方法会自动同步搜索参数变化（如筛选、分页）对应的结果到数组
• 手动搜索方式灵活性更高，但需自行处理加载状态、错误捕获等逻辑

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