获取此错误“钩子调用无效。只能在函数组件主体内部调用钩子。”在功能组件内部？

Question

我收到这个错误”无效的钩子呼叫。钩子只能在函数组件的主体内部调用。“当我尝试运行我的函数时。我试图运行一个脚本，生成reCaptcha令牌脚本如下：

这个组件应该生成令牌（这是我得到错误的地方）

import * as React from 'react'
import { RECAPTCHA_KEY } from '../../../utils/env'

// @ts-ignore
declare const window: any

interface RecaptchaProps {
  actionType: string
}
export const RecaptchaGen = ({ actionType }: RecaptchaProps) => {
  const siteKey = RECAPTCHA_KEY
  const [loaded, setLoaded] = React.useState(false)
  React.useEffect(() => {
    const scriptTag = document.createElement('script')
    scriptTag.src = 'https://www.google.com/recaptcha/api.js?render=' + siteKey
    document.appendChild(scriptTag)

    return () => {
      scriptTag.remove()
      setLoaded(false)
    }
  }, [siteKey])

  React.useEffect(() => {
    if (!loaded) return
    window.grecaptcha.ready(function () {
      window.grecaptcha
        .execute(siteKey, {
          action: actionType,
        })
        .then(function (token: string) {
          //reCaptch token generated needs to be sent to the back end for validation
          console.log(token)
        })
    })
  }, [loaded, actionType, siteKey])
}

在另一个组件中，我调用了前面的脚本组件，并传递了一个动作类型，但是我得到了提到的react钩子错误（仅显示相关代码）。

import * as React from 'react'
import { RecaptchaGen } from '../../../components/_molecules/Recaptcha'

const onLoginClick = () => {
    RecaptchaGen({ actionType: 'login' })
  }

我想问题在于我调用/使用导入组件的方式，但我找不到解决方案？

Answer 1

名称RecaptchaGen表明它是构造函数或组件，但两者都不是。它是一个自定义挂钩，因此应该以use开头，例如：useRecaptchaGen。

下面是如何在组件中使用它：

export const useRecaptchaGen = (action) => {
  if (!action) {
    return;
  }
  const { actionType }: RecaptchaProps = action;
  //....rest of your code
};

const Component = () => {
  const [action, setAction] = React.useState(false);
  const onLoginClick = () => {
    setAction({ actionType: 'login' });
  };
  //cannot conditionally call hooks
  useRecaptchaGen(action);
};

Answer 2

您正在使用常规js函数中的useffecthook。

挂钩只能在有效的react组件内调用RepcaptchaGen不是react组件，因为它没有使用react组件特定的东西，比如返回一些jsx。

Answer 3

我不熟悉你的具体用例，但是一个常见的模式是将一些效果逻辑封装到一个由你的自定义钩子返回的函数中，然后任何正常的JS函数（回调与否）都可以调用该函数。

>

返回一个函数以基本替换第二个useffect回调。

export const useRecaptchaGen = ({ actionType }: RecaptchaProps) => {
  const siteKey = RECAPTCHA_KEY
  const [loaded, setLoaded] = React.useState(false)
  React.useEffect(() => {
    const scriptTag = document.createElement('script')
    scriptTag.src = 'https://www.google.com/recaptcha/api.js?render=' + siteKey
    document.appendChild(scriptTag)

    return () => {
      scriptTag.remove()
      setLoaded(false)
    }
  }, [siteKey]);

  const generateRecaptcha = () => {
    if (!loaded) return;
    window.grecaptcha.ready(function () {
      window.grecaptcha
        .execute(siteKey, {
          action: actionType,
        })
        .then(function (token: string) {
          //reCaptch token generated needs to be sent to the back end for validation
          console.log(token)
        })
    })
  };

  return { generateRecaptcha };
}

在组件中，使用新的钩子和解构generateRecaptcha。

const { generateRecaptcha } = useRecaptchaGen({ actionType: 'login' });

在onLoginClick处理程序中调用generateRecaptcha。

const onLoginClick = () => {
  generateRecaptcha();
}