reactjs - Recaptcha 缺少必需的参数：sitekey

Question

我正在将 recaptcha 集成到我的 react 应用程序中，并且当我使用 grecaptch 的渲染方法时出现此错误：“缺少必需的参数：sitekey”，即使我已将 sitekey 正确包含在参数中。

这是我的参考代码：

class ReCaptcha extends React.Component {

  componentDidMount() {

    this.callbackName = 'g-lf-callback';
    window[this.callbackName] = this.props.callback;

    if(window.grecaptcha) {

        this.renderRecaptcha();
    } else {

        this.loadRecaptchaScript();
    }
  }

  componentWillUnmount() {

    delete window['rconload'];
    delete window[this.callbackName];
  }

  loadRecaptchaScript() {

    window['rconload'] = () => {

        this.renderRecaptcha();
    };

    let url = 'https://www.google.com/recaptcha/api.js?onload=rconload&render=explicit';
    loadScript(url, '', 'recaptcha', true, true)
    .then( () => {})
    .catch( () => {});
  }

  renderRecaptcha = () => {

    if(this.container) {

        let parameters = {
            sitekey: process.env.MY_SITEKEY,
            size: 'invisible',
            badge: null,
            callback: 'g-lf-callback'
        };

        const recaptchaId = window.grecaptcha.render(this.container, parameters);

        this.execute = () => window.grecaptcha.execute(recaptchaId);
        this.reset = () => window.grecaptcha.reset(recaptchaId);
        this.getResponse = () => window.grecaptcha.getResponse(recaptchaId);
    }

  }

  onClick = () => {

    this.execute();
  }

  render() {

    let { callback, label, className, ...btnProps } = this.props;

    return (
        <Button
            { ...btnProps }
            className={ className }
            onClick={ this.onClick }
            ref = { ref => this.container = ref }
        >
            { label }
        </Button>
    )
  }
}

我还将recaptcha url的渲染参数设置为显式

https://www.google.com/recaptcha/api.js?onload=rconload&render=explicit

加载回调：

window['rconload'] = () => {

    this.renderRecaptcha();
};