如何在 signInWithPhoneNumber() 成功时重置 recaptcha

Question

我正在使用Firebase.auth()signInWithPhoneNumber(number, appVerifier)

一切都按预期工作，但我正在尝试解决以下问题：

这是我的实现：

  useEffect(() => {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier("sendBtn", {
      size: "invisible",
      callback: function () {
        onSend();
      },
    });
  });

  const onSend = (value) => {
    const appVerifier = window.recaptchaVerifier;
    const setMobile = "valid mobile..";
    firebase
      .auth()
      .signInWithPhoneNumber(setMobile, appVerifier)
      .then(function (confirmationResult) { 
        appVerifier.reset()
        console.log(confirmationResult)
      })
      .catch(function (error) {
        appVerifier.reset()
        console.log(error);
      }); 
  };

如何正确处理 Recaptcha？无需多次渲染。我想在 Recaptcha 上成功销毁它，我已经阅读了文档 here 但 clear() 或 reset() 似乎不起作用

Answer 1

您必须提供 useEffect 的依赖关系，否则它会在每次组件渲染时执行。

useEffect(() => {
  // recaptcha
}, [])

Answer 2

您可以为 useEffect 提供一个空的依赖项数组，以便仅在初始渲染后触发，更多详细信息在此 。

此外，在尝试初始化新 RecaptchaVerifier.

useEffect(() => {
  if (!window.recaptchaVerifier) {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier('sendBtn', {
      size: 'invisible',
      callback: function () {
        onSend();
      }
    });
  }
}, []);