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>，但是，您正在<SearchBox>模板中导入Blog，这会导致错误，因为您没有传递{ {1}}到您的组件。由于您要自定义搜索组件并将其通过props连接到<Searchbox>，因此需要导出/导入它。只需将其更改为：

connectSearchBox

Algolia的文档缺少对最常见用例的解释，尤其是在自定义组件时，因此您必须花点时间来寻找方法。

我尝试自定义搜索框组件时遇到的问题

1 个答案: