当我尝试自定义搜索框组件时 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

Answer 1

在您<SearchBox>正在导出的组件中<CustomSearchBox>，但是，您正在导入<SearchBox>您的Blog模板，这会导致您的错误，因为您没有传递props给您的组件。由于您正在自定义搜索组件并将其连接到 via，因此<Searchbox>您connectSearchBox需要导出/导入它。只需将其更改为：&nbsp; return (&nbsp; &nbsp; <Layout>&nbsp; &nbsp; &nbsp; <SEO title="blog Page" />&nbsp; &nbsp; &nbsp; <h1>Hello</h1>&nbsp; &nbsp; &nbsp; <InstantSearch indexName="hma" searchClient={searchClient} >&nbsp; &nbsp; &nbsp; &nbsp; <div className="right-panel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CustomSearchBox />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Articles>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Hits hitComponent={Article} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Articles>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </InstantSearch>&nbsp; &nbsp; </Layout>&nbsp; )}Algolia 的文档缺乏对最常见用例的解释，尤其是在自定义组件时，因此您必须绞尽脑汁才能找出如何进行。