在Gatsby中反应挂钩:无效的挂钩调用 [英] React hooks in Gatsby: Invalid hook call
问题描述
尝试从React示例中实现自定义钩子: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state ,但出现以下错误:
Trying to implement a custom hook from a react example: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state, but I get the following error:
错误:
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
当我尝试将其作为自定义钩子usePrevious
导入时,在useEffect
上发生了错误.
The error happen on useEffect
when I try to import it as a custom hook usePrevious
.
我尝试了以下操作:
验证react-dom和react在同一版本上
react-dom@16.8.5
react@16.8.5
I tried following:
verified that react-dom and react is on the same version
react-dom@16.8.5
react@16.8.5
已验证我只有一个版本的React
Verfied I only have one version of React
我也相信代码没有违反任何钩子规则.
Also I do belive the code is not breaking any rules of hooks.
也尝试在stackoverflow上查看相关问题.
Also tried looking at related issues here on stackoverflow.
代码:
// 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>
)
}
推荐答案
您在usePrevious
hooks文件中的导入不正确. useRef
和useEffect
应该从'react'
而不是React
导入;
Your import in usePrevious
hooks file is incorrect. useRef
and useEffect
should be import from 'react'
and not React
;
import { useRef, useEffect} from "react"
这篇关于在Gatsby中反应挂钩:无效的挂钩调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!