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

Question

React中的新功能，试图实现一个自定义钩子，当用户按下键时调用一个函数"输入"：

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())
}
}, [])
}

我面临这个错误：

错误：钩子调用无效。钩子只能称为身体内部功能组件。

不明白我为什么会出现这个错误。

Answer 1

之所以出现此错误，是因为不允许在useEffect内部调用钩子。具体地说，钩子应该在顶层调用，而不应该有条件地调用。

有关更多信息，请参阅此处-挂钩规则

Answer 2

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

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

这会奏效的！