如何在 signInWithPhoneNumber() 成功时重置重新验证码

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 上销毁它，我已经阅读了此处的文档，但 clear() 或 reset() 似乎不起作用

Answer 1

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

此外，在尝试初始化新的RecaptchaVerifier之前，添加 if 检查以查看是否设置了window.recaptchaVerifier可能是一个好主意（如果您在页面上的其他任何地方都有使用 recaptcha 的组件）。

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

Answer 2

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

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