Firebase RecaptchaVerifier.clear（）无效

Question

我有要在其中实现电话身份验证的Web应用程序。我已经基于文档和示例初始化了recaptchaVerifier。但是，如果我想再次提交表单（例如由于错误）。我收到错误消息：Error: reCAPTCHA has already been rendered in this element。

我试图使用.clear方法删除验证程序，但这似乎没有效果。波纹管是示例代码。

有什么我忽略的东西吗？

谢谢。

class PhoneAuth extends React.Component {
  static contextTypes = {
    firebase: PropTypes.object.isRequired,
  };

  state = {
    phone: '',
  }

  onChangeHandler = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  onPhoneLoginSubmit = (e) => {
    const { onVerificationSend } = this.props
    const {phone} = this.state
    const {firebase }=this.context

    e.preventDefault()

    this.applicationVerifier = new firebase.auth.RecaptchaVerifier(
      'recaptcha-container',
      { size: 'invisible' }
    );

    firebase.auth().signInWithPhoneNumber(phone, this.applicationVerifier)
      .then((result) => {
        onVerificationSend(result.verificationId)
        this.applicationVerifier.clear()
      })
      .catch (error => {
        this.setState({formError: error})
        this.applicationVerifier.clear()
      })
  }

  render() {
    const { intl } = this.props;
    const { phone, formError } = this.state

    return (
      <div>
      <form onSubmit={this.onPhoneLoginSubmit} name="phone-signin" method="post">
              <input
                id="phone"
                name="phone"
                type="phone"
                onChange={this.onChangeHandler}
                value={phone}
              />
              <label className="input__label" htmlFor="email">
               phone number
              </label>

            {formError && (
              <p >
                {formError.code}
              </p>
            )}

            <button
              type="submit"
            >
              sign in
            </button>
          </form>
          <div id="recaptcha-container"></div>
      </div>
    )
  }
}

Answer 1

所以，我知道了。问题不是clear（）方法-工作正常。但是我必须从头开始重新创建验证码容器。Doc不清楚，所以这让我感到困惑。在文档中有：

从页面中清除reCAPTCHA小部件并破坏当前实例。

因此，我认为将通过该方法将其删除。

因此，现在我在render方法中有以下代码：

<div ref={ref => this.recaptchaWrapperRef = ref}>
  <div id="recaptcha-container"></div>
</div>

然后在提交回调中：

if (this.applicationVerifier && this.recaptchaWrapperRef) {
  this.applicationVerifier.clear()
  this.recaptchaWrapperRef.innerHTML = `<div id="recaptcha-container"></div>`
}

// Initialize new reCaptcha verifier
this.applicationVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  { size: 'invisible' }
);

这是我设法做出反应的唯一方法。如果有人仍然有更好的方法，请随时发布。我认为这非常丑陋（对于React）。