reactjs - Algolia InstantSearch 没有响应

Question

我正在尝试使用 Algolia 搜索我的 firestore 集合中的文档vendor。我利用 Cloud Functions 将新用户添加到 Algolia 索引和 Firestore，效果很好。使用了来自react-instantsearch-dom的InstantSearch、Hits、SearchBox ，但是当我运行我的代码时，会显示 SearchBoxonly，当我尝试在我的集合中搜索名称时，它不会返回任何内容。我尝试检查元素并检查SearchAPIlogs，但什么也没有。部署时我没有收到错误。我真的很感激任何帮助。

这是云函数的 index.ts

import * as functions from "firebase-functions";
import algoliasearch from "algoliasearch";

const env = functions.config();

const vendor = algoliasearch(env.algolia.app_id, env.algolia.admin_key);
const index = vendor.initIndex("vendors");

export const vendorCreated = functions.firestore.document("vendors/{vendorId}")
    .onCreate(
        ((snapshot, context) => {
          return index.saveObject({
            objectID: snapshot.id,
            ...snapshot.data(),
          });
        })
    );

export const vendorDeleted = functions.firestore.document("vendors/{vendorId}")
    .onDelete(
        (snapshot, context) => {
          return index.deleteObject(snapshot.id);
        }
    );

对于 SearchPage 组件

import React from 'react'
import algoliasearch from 'algoliasearch'
import Image from '../assets/image/signin.jpg'
import {InstantSearch, SearchBox, Hits} from 'react-instantsearch-dom'


const  SearchPage = () => {

  const searchClient = algoliasearch(process.env.REACT_APP_ALGOLIA_APP_ID!, process.env.REACT_APP_ALGOLIA_SEARCH_KEY!)
  
  const Hit = ({hit}: any) => {
    return(
      <div className='container'>
        <div className='profile'>
          <div className='img-container'>
            <img src={Image} />
          </div>
          <div className='sub-wrapper'>
            <h1>{hit.brandname}</h1>
            <p>{hit.location}</p>
            <p>{hit.services}</p>
            <div className='contacts'>
              <p>{hit.phonenumber}</p>
              <p>{hit.email}</p>
            </div>
          </div>
        </div>
      </div>     
    )
  }
  
  return(
    
        <div>
            <InstantSearch searchClient={searchClient} indexName="vendors">
            <header className="App-header">
              <SearchBox translations={{placeholder: 'Search brandname'}}/>
            </header>
            <Hits hitComponent={Hit}/>
            </InstantSearch>
        </div>
    )
  }
  
  export default SearchPage;

标签： reactjsfirebasegoogle-cloud-firestorealgoliareact-instantsearch