我的自定义钩子是警告：“无效的钩子调用。只能在函数组件的主体内部调用钩子答案

【问题标题】：My custom hook is warning: "Invalid hook call. Hooks can only be called inside of the body of a function component我的自定义钩子是警告：“无效的钩子调用。只能在函数组件的主体内部调用钩子
【发布时间】：2021-09-05 09:08:28
【问题描述】：

React 中的新功能，尝试实现一个自定义钩子，当用户按下“Enter”时调用一个函数：

import { useEffect } from 'react'

const useEnterToCall = callBackFunction => {
  const listenToCallWithEnter = e => {
    e.code === 'Enter' && callBackFunction()
  }

  useEffect(() => {
    document.addEventListener('keydown', listenToCallWithEnter)
    return () => document.removeEventListener('keydown', listenToCallWithEnter)
  }, [])
}

export default useEnterToCall

在我的组件中，我导入了这个自定义钩子并尝试使用：

import React, { useEffect } from 'react'
import useEnterToCall from '../../hooks/useEnterToCall.hook'

const Login = () => {
    
    useEffect(() => {
      if (valid) {
        useEnterToCall(submit())
      }
    }, [])
}

我遇到了这个错误：

错误：无效的挂钩调用。钩子只能在体内调用一个函数组件。

不明白为什么我会收到此错误。

【问题讨论】：

要么你跳过了相当多的代码，要么你的useEffect（第二个）不在函数组件的主体内（即错误所说的）。
我抑制了代码，如果我只使用 useEffect()，我的组件可以正常工作，但是当我将 useEffect 与我的自定义钩子一起使用时，我收到此错误。
您需要展示一个最小的但完整的示例，但事实并非如此。 “导入此自定义挂钩”不起作用，并且会给您相同的错误消息（并且您没有指定）。换句话说，我们不知道你实际做了多少与决定不重要，即使它本身看起来像是一个问题。
感谢@crashmstr，我尝试在问题中添加更多代码

标签： reactjs react-hooks

【解决方案1】：

您收到此错误的原因是不允许在 useEffect 中调用挂钩。具体来说，钩子应该在顶层调用，而不是有条件地调用。

有关更多信息，请参阅此处 - Rules of hook

【讨论】：

【解决方案2】：

是的，你不能在 useEffect 中调用自定义钩子

    import useEnterToCall from '../../hooks/useEnterToCall.hook'
    function yourFn() {
       console.log("log enter");
     }

   useEnterToCall(yourFn);

这会起作用的！

【讨论】：