TypeError: Невозможно прочитать свойство 'содержит' пустого значения - PullRequest
Новая
       88

TypeError: Невозможно прочитать свойство 'содержит' пустого значения

1 голос
/ 03 мая 2020

Я следую этому уроку по Алголии , и я новичок в Гэтсби. Код ниже, кажется, вызывает проблему в данный момент.

Я добавил оставшуюся часть кода из поиска / индекса. 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 ошибка. Если у кого-то есть намеки, я был бы очень благодарен. Спасибо.

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Проблема, вероятно, возникла, когда вы определили свой реф. Пожалуйста, используйте рекомендации, рекомендованные Facebook.

Я думаю, вы, вероятно, делаете что-то подобное: 

const ref = React.createRef()

<InstanceSearch 
/* Your rest of your props */
ref={ref}
/>
0 голосов
/ 09 мая 2020

У меня была такая же проблема, и я исправил ее, добавив ref={ref} к <HitsWrapper> внутри поиска / индекса. js. 

<HitsWrapper ref = {ref} show={query.length > 0 && focus} asGrid={hitsAsGrid}>
...