javascript Gatsby 中的 React 钩子：无效的钩子调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55373010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React hooks in Gatsby: Invalid hook call
提问by Bj?rn Hjorth
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:
尝试从反应示例中实现自定义钩子：https: //reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state，但出现以下错误：
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
The error happen on useEffectwhen I try to import it as a custom hook usePrevious.
useEffect当我尝试将其作为自定义 hook 导入时会发生错误usePrevious。
I tried following:
verified that react-dom and react is on the same version
[email protected][email protected]
我尝试了以下操作：验证 react-dom 和 react 在同一版本上
[email protected][email protected]
Verfied I only have one version of React
确认我只有一个版本的 React
Also I do belive the code is not breaking any rules of hooks.
我也相信代码没有违反任何钩子规则。
Also tried looking at related issues here on stackoverflow.
还尝试在 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>
)
}
采纳答案by Shubham Khatri
Your import in usePrevioushooks file is incorrect. useRefand useEffectshould be import from 'react'and not React;
您在usePrevioushooks 文件中的导入不正确。useRef并且useEffect应该是'react'从而不是进口React；
import { useRef, useEffect} from "react"
