在第一次渲染之前运行 useEffect 中的 React recaptcha 构造函数

Question

也许我误解了useEffect的概念，但我认为它取代了componentDidMount、componentDidUpdate和componentWillUnmount，所以它的第一次运行是在组件渲染之后。 我想将 firebase 集成到我的 react 项目中，但是在我看来 useEffect 在渲染方法之前运行，因为如果我按照以下方式使用它，它会给我这个错误

reCAPTCHA 容器未找到或已包含内部 元素！

const PhoneVerificationModal = (props) => {
    useEffect(() => {
        const firebaseConfig = {
            apiKey: "...",
            authDomain: "...",
            databaseURL: "...",
            projectId: "...",
            storageBucket: "...",
            messagingSenderId: "...",
            appId: "..."
        };

        firebase.initializeApp(firebaseConfig);
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
            'size': 'invisible',
            'callback': function (response) {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                firebaseSubmit();
            }
        });

    }, []);

    const [open, toggleOpen] = useState(props.open);

    useEffect(() => {
        toggleOpen(props.open);
    });

    const sendVerificationCode = () => {
        if (props.phone) {
            console.log(props.phone);
            let phoneNumber = props.phone;
            var appVerifier = window.recaptchaVerifier;
            firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
                .then(function (confirmationResult) {
                    console.log(confirmationResult);
                    window.confirmationResult = confirmationResult;
                }).catch(function (error) {
                });
        }

    }

    const firebaseSubmit = () => {

    }
    return (
        <Modal open={open} key={open} closeModal={props.closeModal}>
            <div className={classes.PhoneVerificationModalInner}>
                <div className={classes.headerRow}>
                </div>
                <div className={classes.narrowCol}>
                    <div id="recaptcha-container"></div>
                    <Button
                        className={classes.button}
                        rightIcon={Images.arrow}
                    >Continue</Button>
                </div>
            </div>
        </Modal>
    )
}

如果我用 setTimeout 向 recaptcha 构造函数添加延迟，它运行没有问题。那么构造函数怎么找不到元素，即使它是由于useEffect而渲染的呢？

Answer 1

我一遍又一遍地尝试这个，这个（隐形验证码）对我有用。

我的方法是仅在提交时才调用验证码。 useEffect 不是必需的，如果用户花很长时间输入数字并提交，您的验证码也不会过期。

您需要将其添加到您的脑海中。这提供了 grecaptcha.reset 功能

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

创建一个提交时应该调用的 onSubmit 按钮。

   const onSubmit = async () => {

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('mycode', {
            'size': 'invisible',
            'callback': async function(res) {
                
                console.log('captcha code', res)
                //do your sign in with phone here.


            },
            'expired-callback': function() {
                grecaptcha.reset();
            }
    
        });


        window.recaptchaVerifier.render().then(function (widgetId) {       
            window.recaptchaWidgetId = widgetId;
            grecaptcha.execute(window.recaptchaWidgetId);
        })
        
        
     //https://developers.google.com/recaptcha/docs/invisible#js_api

}

在您的渲染中，您需要具有以下内容

<div id="mycode" />

当您点击提交按钮时（在您捕获手机/电话号码后），Recaptcha 将确定是否需要进行验证码检查。然后，您将获得可以提交到后端进行验证的代码。