Question

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

我正面临这个错误：

<块引用>

错误：无效的挂钩调用。 Hooks 只能在 body 内部调用一个功能组件。

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

Answer 1

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

有关详细信息，请参阅此处 - Rules of hook

Answer 2

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

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

   useEnterToCall(yourFn);

这行得通！

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

2 个答案: