我遇到了这个 React Invalid Hook Call Error ，我想看看我是不是违反了 hooks 的规则，还是别的什么？

Question

我收到以下错误。

无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 你可能在同一个应用程序中拥有多个 React 副本

有关如何调试和解决此问题的提示，请参阅（我无法添加的链接）。

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）

这是我的代码。 是违反了钩子规则还是其他问题？

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useData } from 'useData';

export const checkReference = ({
  refId,
}) => {
  const data = useData(); //useContext hook
  let refData = {};
  if (refId) refData = data.getReference(refId);

  useEffect(() => {
    console.log('INITIAL LOGIC');
    if (refData.parameter){
      console.log('SECONDARY LOGIC', refData);
    }
  }, [])
  
  checkReference.propTypes = {
    refId: PropTypes.string,
  }
  checkReference.defaultProps = {
    refId: null,
  }
}

我使用checkReference('page-name');从另一个文件调用它

Answer 1

React 钩子旨在用于功能组件内部，例如：

export const CustomComponent = () => {}
export function CustomComponent() {}

它们不能在正常的 function 中使用，因为它不会存在于 React 组件的上下文中。 如果你想在组件外部定义的函数内部使用useState或useEffect类的东西，你必须创建一个自定义钩子。 也就是说， use前缀（例如useCheckReference ）创建一个 function ，然后像这样使用它：

export const MyComponent = () => {
  const reference = useCheckReference()
}

这样 React 就知道 function 大概会在组件内部被调用，并且 hooks 的使用是可靠的，也会对 hooks 和组件生命周期进行一些优化。

Answer 2

我在我的 Next.js 应用程序中遇到了同样的问题。 这是一个与缓存相关的问题。 你可以试试这些步骤。

1. 删除node_modules和.next文件夹
2. 运行npm install或yarn
3. 重新开始你的项目