在 ReactJS/GatsbyJS 中使用外部脚本中的 Function

Question

I have a script which is dynamically inserted into the head of the site onfocus of a form element, this is done for page load purposes. The load does not use react helmet but basic vanilla js by doing

const handleFocus = () =>
{
    if (!loaded)
    {
        setScriptLoaded(true);
        const script = document.createElement('script');
        script.src = 'https://hcaptcha.com/1/api.js';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    }
};

This works without any problems. What I am trying to do is call the hcaptcha.reset() function in an on submit handler which is. I can confirm that that method does work when called from the browser

const formSubmit = async (e) =>
{
    window.hcaptcha.reset();
}

Doing this is trowing a lot of error in gatsby which are

Unknown Runtime Error

Objects are not valid as a React child (found: [object Response]). If you meant to render a collection of children, use an array instead.
:

No codeFrame could be generated

How can I call the.reset() method of hcaptcha from react without the errors?

Answer 1

Assuming you are not returning an empty JSX statement, which can be fixed by wrapping it in any tag (even empty tag <> ):

return (
    <>
        {yourResponse}
    </>

You may want to:

const formSubmit = async (e) => {
   return window.hcaptcha.reset();
}

Or using the implicit return

const formSubmit = async (e) =>  return window.hcaptcha.reset();