Реакция хуков в Гэтсби: неверный вызов хуков - PullRequest
Новая
       14

Реакция хуков в Гэтсби: неверный вызов хуков

4 голосов
/ 27 марта 2019

Попытка реализовать пользовательский хук из примера реакции: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state,, но я получаю следующую ошибку:

ОШИБКА: 

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Ошибка происходит на useEffect когда я пытаюсь импортировать его как пользовательский хук usePrevious.

Я попытался сделать следующее: проверил, что реагирует на одну и ту же версию react-dom@16.8.5 react@16.8.5

ПровереноУ меня есть только одна версия React

Кроме того, я верю, что код не нарушает никаких правил хуков.

Также попытался посмотреть на связанные с этим проблемы здесь на stackoverflow.

CODE: 

// file: use-previous.js

import { useRef, useEffect} from "React"

export const usePrevious = (value) =>  {

    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });




    return ref.current;
}

// file: layout.js

import React, { useState, useEffect } from "react"

import Header from "./header/header"

import { useFacetsData } from "../hooks/use-facets-data"
import { usePrevious } from "../hooks/use-previous"


export default ({ children, ...props }) => {

    const [ searchValue, setSearchValue ] = useState("")

    const [ facetsSelected, setFacetsSelected ] = useState([])

    const facets = useFacetsData()


    const oldSearchValue = usePrevious(searchValue)
    // const oldFacetsSelected = usePrevious(facetsSelected)

    useEffect(() => {
        // if new searchvalue or new facetvalue

        // if (searchValue !== oldSearchValue || facetsSelected !== oldFacetsSelected) makeSearch()
    }) 

    function makeSearch() {
        console.log('make search')

        // move to searchpage 
    }

    function handleSearchChange(search) {
        setSearchValue(search)
    }

    function handleFacetChange(facets) {
        setFacetsSelected(facets)
    }   

    return   (
        <div>
            {/* Main sticky header */}
            <Header 
                facets={ facets } 
                onSearchChange={ handleSearchChange } 
                onFacetChange={ handleFacetChange } >
            </Header>

            {/* route content */}
           {React.cloneElement(children, { facets })}
        </div>
    )
}

1 Ответ

1 голос
/ 27 марта 2019

Ваш импорт в usePrevious файл хуков неверен.useRef и useEffect должны быть импортированы из 'react', а не React; 

import { useRef, useEffect} from "react"
...