Я следую этому уроку по Алголии , и я новичок в Гэтсби. Код ниже, кажется, вызывает проблему в данный момент.
Я добавил оставшуюся часть кода из поиска / индекса. js file ...
import React, { useState, useEffect, createRef } from "react"
import { InstantSearch, Index, Hits, connectStateResults } from "react-instantsearch-dom"
import algoliasearch from "algoliasearch/lite"
import { Root, HitsWrapper, PoweredBy } from "./styles"
import Input from "./input"
import * as hitComps from "./hitComps"
const Results = connectStateResults(
({ searchState: state, searchResults: res, children }) =>
res && res.nbHits > 0 ? children : `No results for '${state.query}'`
)
const Stats = connectStateResults(
({ searchResults: res }) =>
res && res.nbHits > 0 && `${res.nbHits} result${res.nbHits > 1 ? `s` : ``}`
)
const useClickOutside = (ref, handler, events) => {
if (!events) events = [`mousedown`, `touchstart`]
const detectClickOutside = event =>
!ref.current.contains(event.target) && handler()
useEffect(() => {
for (const event of events)
document.addEventListener(event, detectClickOutside)
return () => {
for (const event of events)
document.removeEventListener(event, detectClickOutside)
}
})
}
export default function Search({ indices, collapse, hitsAsGrid }) {
const ref = createRef()
const [query, setQuery] = useState(``)
const [focus, setFocus] = useState(false)
const searchClient = algoliasearch(
process.env.GATSBY_ALGOLIA_APP_ID,
process.env.GATSBY_ALGOLIA_SEARCH_KEY
)
useClickOutside(ref, () => setFocus(false))
return (
<InstantSearch
searchClient={searchClient}
indexName={indices[0].name}
onSearchStateChange={({ query }) => setQuery(query)}
root={{ Root, props: { ref } }}
>
<Input onFocus={() => setFocus(true)} {...{ collapse, focus }} />
<HitsWrapper show={query.length > 0 && focus} asGrid={hitsAsGrid}>
{indices.map(({ name, title, hitComp }) => (
<Index key={name} indexName={name}>
<header>
<h3>{title}</h3>
<Stats />
</header>
<Results>
<Hits hitComponent={hitComps[hitComp](() => setFocus(false))} />
</Results>
</Index>
))}
<PoweredBy />
</HitsWrapper>
</InstantSearch>
)
}
Страница загружается, но затем щелкает в любом месте экрана, чтобы получить следующее ошибка ...
TypeError: Cannot read property 'contains' of null
HTMLDocument.detectClickOutside
src/components/search/index.js:21
18 |
19 | const useClickOutside = (ref, handler, events) => {
20 | if (!events) events = [`mousedown`, `touchstart`]
21 | const detectClickOutside = event =>
22 | !ref.current.contains(event.target) && handler()
23 | useEffect(() => {
24 | for (const event of events)
Я уверен, что это очень базовая c ошибка. Если у кого-то есть намеки, я был бы очень благодарен. Спасибо.