Recaptcha Missing必需参数：sitekey

Question

我正在将recaptcha整合到我的反应应用中，并且我遇到了这个错误：＆＃34;缺少必需的参数：sitekey＆＃34;当我使用grecaptch的render方法时，即使我已将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的render参数设置为显式

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

Onload回调：

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

    this.renderRecaptcha();
};