当我尝试自定义搜索框组件时 algolia 出现问题

Question

我已经将 Algolia 添加到我的 gatsby 项目中，它工作得很好但是当我想自定义搜索框时我遇到了一个问题我需要一些帮助我的朋友这是我第一次使用这个插件感谢你的帮助

当我将搜索框组件从“react-instantsearch-dom”更改为自定义时，请给我这个错误任何帮助。

import React from "react"
import { graphql } from "gatsby"
import { InstantSearch, Hits, SearchBox } from "react-instantsearch-dom"
import algoliasearch from "algoliasearch/lite"

import SEO from "../components/seo"
import Article from "../components/article"
import {Articles} from "../style/styles"
import Layout from "../components/layout"

const Blog = () => {
  const searchClient = algoliasearch(
    "XXXXXXX",
    "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  )
  return (
    <Layout>
      <SEO title="blog Page" />
      <h1>Hello</h1>
      <InstantSearch indexName="hma" searchClient={searchClient} >
        <div className="right-panel">
          <SearchBox />
          <Articles>
              <Hits hitComponent={Article} />
          </Articles>
        </div>
      </InstantSearch>
    </Layout>
  )
}
export const query = graphql`
  query($skip: Int!, $limit: Int!) {
    blogs: allMdx(
      filter: { fileAbsolutePath: { regex: "//data/blogs//" } }
      sort: { order: ASC, fields: frontmatter___date }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            tags
            keywords
            image
            description
            author
            category
          }
        }
      }
    }
  }
`
export default Blog

import { connectSearchBox } from 'react-instantsearch-dom';

const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => (
  <form noValidate action="" role="search">
    <input
      type="search"
      value={currentRefinement}
      onChange={event => refine(event.currentTarget.value)}
    />
    <button onClick={() => refine('')}>Reset query</button>
    {isSearchStalled ? 'My search is stalled' : ''}
  </form>
);

const CustomSearchBox = connectSearchBox(SearchBox);

export default CustomSearchBox;

Answer 1

在您的 <SearchBox> 组件中导出 <CustomSearchBox>，但是，您在 Blog 模板中导入 <SearchBox>，这会导致错误，因为您没有将 props 传递给您的组件。由于您要自定义搜索组件并通过 connectSearchBox 将其连接到 <Searchbox>，因此您需要 export/import 它。只需将其更改为：

  return (
    <Layout>
      <SEO title="blog Page" />
      <h1>Hello</h1>
      <InstantSearch indexName="hma" searchClient={searchClient} >
        <div className="right-panel">
          <CustomSearchBox />
          <Articles>
              <Hits hitComponent={Article} />
          </Articles>
        </div>
      </InstantSearch>
    </Layout>
  )
}

Algolia 的文档缺乏解释，尤其是在自定义组件时，最常见的 use-cases 因此您必须绞尽脑汁才能了解如何进行。

当我尝试自定义搜索框组件时 algolia 出现问题

problem with algolia when i try to customize searchbox component

javascript

reactjs

algolia

gatsby