当我尝试自定义搜索框组件时，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>，因此需要将其导出/导入。只需将其更改为：

  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的文档缺乏对最常见用例的解释，特别是在自定义组件时，因此您必须稍微绞尽脑汁才能找出如何继续操作。