收到此错误“无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。” 在反应功能组件内？

Question

I am receiving this error "Invalid hook call. Hooks can only be called inside of the body of a function component." when I try and run my function. I am trying to run a script that generates a reCaptcha token the script is as follows:

This component should generate the token(this is where I get the error)

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])
}

Here within another component, I call the prior script component with an action type passed through but I get the react hook error mentioned(only showing relevant code snipets).

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

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

I presume the issue is the way I am calling/using the imported component but I can't find a solution?

Answer 1

You are using useEffect hook inside regular js function.

hooks can only be called inside valid react component. RepcaptchaGen is not a react component because its not using react component specific things like returning some jsx .

Answer 2

The name RecaptchaGen would suggest it is a constructor function or component but it's neither. it is a custom hook so should start with use , for exampele: useRecaptchaGen.

Here is how you can use it in your component:

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 3

The reason for this is that you aren't returning any code in your RecaptchaGen function. A JSX return, among other things, is what differentiates a React Functional component from a regular javascript function, and a regular javascript function can't use hooks. If you want to fix this, add a return statement.

Answer 4

I am not familiar with your specific use case, but a common pattern is to encapsulate some of the effect logic into a function that is returned by your custom hook, then any normal JS function (callback or not) can invoke that function.

1. Rename RecaptchaGen to useRecaptchaGen so it can be used as a React hook.

2. Return a function to basically replace the second useEffect callback.

    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 }; }

3. In the component use the new hook and destructure generateRecaptcha .

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

4. Invoke generateRecaptcha in the onLoginClick handler.

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