admin管理员组文章数量:1326011
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>
)
}
Share
Improve this question
asked Mar 27, 2019 at 8:47
Björn HjorthBjörn Hjorth
2,9085 gold badges26 silver badges32 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
1 Answer
Reset to default 3Your 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
版权声明:本文标题:javascript - React hooks in Gatsby: Invalid hook call - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742133707a2422277.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论