Gatsby 中的 React 钩子：无效的钩子调用

Question

尝试从反应示例中实现自定义挂钩：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 和 react 在同一版本上 react-dom@16.8.5react@16.8.5

已验证我只有一个版本的 React

我也相信代码没有违反任何钩子规则。

也尝试在 Whosebug 上查看相关问题。

代码：

// 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>
    )
}

Answer 1

您在 usePrevious 挂钩文件中的导入不正确。 useRef 和 useEffect 应该从 'react' 而不是 React;

导入

import { useRef, useEffect} from "react"

Gatsby 中的 React 钩子：无效的钩子调用

React hooks in Gatsby: Invalid hook call

javascript

reactjs

gatsby

react-hooks