javascript - React hooks in Gatsby: Invalid hook call - Stack Overflow

admin管理员组

文章数量:1325702

Trying to implement a custom hook from a react example: .html#how-to-get-the-previous-props-or-state, but I get the following error:

ERROR:

Invalid hook call. Hooks can only be called inside of the body of a function ponent. 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

The error happen on useEffect when I try to import it as a custom hook usePrevious.

I tried following: verified that react-dom and react is on the same version [email protected] [email protected]

Verfied I only have one version of React

Also I do belive the code is not breaking any rules of hooks.

Also tried looking at related issues here on 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>
    )
}

Trying to implement a custom hook from a react example: https://reactjs/docs/hooks-faq.html#how-to-get-the-previous-props-or-state, but I get the following error:

ERROR:

Invalid hook call. Hooks can only be called inside of the body of a function ponent. 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

The error happen on useEffect when I try to import it as a custom hook usePrevious.

I tried following: verified that react-dom and react is on the same version [email protected] [email protected]

Verfied I only have one version of React

Also I do belive the code is not breaking any rules of hooks.

Also tried looking at related issues here on 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>
    )
}

• javascript
• reactjs
• gatsby
• react-hooks

Share Improve this question Follow asked Mar 27, 2019 at 8:47 Björn HjorthBjörn Hjorth 2,90855 gold badges2626 silver badges3232 bronze badges 3

• 1 Wouldn't putting the values in question to useEffect's dependency array serve the same purpose? As in useEffect(() => ... , [searchValue, facetsSelected]). React diffs the values in the array automatically and if a change was detected, effect code would run. – Pa Ye Commented Mar 27, 2019 at 13:43
• @Powell_v2 very new to hooks so that is very possible, I will have a check. Thanks for the tip – Björn Hjorth Commented Mar 27, 2019 at 20:43
• @Powell_v2 you are correct, for anyone else interested in what Powell_2 was referring to this is the documentation for it: reactjs/docs/… – Björn Hjorth Commented Mar 28, 2019 at 8:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Your import in usePrevious hooks file is incorrect. useRef and useEffect should be import from 'react' and not React;

import { useRef, useEffect} from "react"

本文标签： javascriptReact hooks in Gatsby Invalid hook callStack Overflow