如何在 recaptcha 回调中访问更新的道具

Question

我正在尝试通过 React 和 Redux 使用集成在 firebase 身份验证中的 reCaptcha。

const Login = props => {

    useEffect(() => {
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('login-button', {
                'size': 'invisible',
                'callback': () => login()
            }
        );
        window.recaptchaVerifier.render()
    }, []);

    function login() {
        console.log(props)
        firebaseLogin(props.email, props.password).then(() => {
                ...
            }
        ).catch(function (error) {
            console.log(error);
            ...
        });
    }

    function onChangePassword(event) {
        props.onChangePassword(event.target.value)
    }

    function onChangeEmail(event) {
        props.onChangeEmail(event.target.value)
    }

    return (
        ...
            <form>
                <label>Dirección de Email</label>

                <div className="form-group">
                    <input type="email"
                           className={`form-control ${emailValidation ? "is-invalid" : ""}`}
                           placeholder="nombre@mail.com"
                           onChange={onChangeEmail} value={props.email} tabIndex={1}
                           autoComplete={"username"}
                           required/>
                    <div className="invalid-feedback">
                        {emailValidation}
                    </div>

                </div>

                <div className="form-group">

                    <div className="row">
                        <div className="col">

                            <label>Contraseña</label>

                        </div>
                        <div className="col-auto">

                            <Link to="/reset-password" className="form-text small text-muted">
                                Olvidé mi contraseña
                            </Link>

                        </div>
                    </div>

                    <div className="input-group input-group-merge">

                        <input type={showPassword ? "text" : "password"}
                               className={`form-control ${passwordValidation ? "is-invalid" : ""} form-control-appended`}
                               placeholder="Ingrese su contraseña" onChange={onChangePassword}
                               value={props.password} required tabIndex={2}
                               autoComplete={"current-password"}/>

                        <div className="input-group-append">
                      <span className="input-group-text clickable"
                            onClick={() => setShowPassword(!showPassword)}>
                        <i className="fe fe-eye"/>
                      </span>
                        </div>
                        <div className="invalid-feedback">
                            {passwordValidation}
                        </div>

                    </div>
                </div>

                <button type="submit" className="btn btn-lg btn-block btn-primary mb-3"
                        id={"login-button"}
                        tabIndex={3}>
                    Acceder
                </button>
            </form>
        ...
    )
};

const mapDispatchToProps = dispatch => ({
    onChangeEmail: value =>
        dispatch({type: UPDATE_LOGIN_FIELD, key: 'formEmail', value}),
    onChangePassword: value =>
        dispatch({type: UPDATE_LOGIN_FIELD, key: 'password', value}),
});

const mapStateToProps = state => ({
    email: state.authentication.formEmail,
    password: state.authentication.password,
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

问题在于，在登录回调中，道具已过时，并且不包含在 redux 存储中加载的电子邮件和密码，它仅包含触发 useEffect 时可用的道具。 （我通过 console.log(props) 看到了）

我不知道如何保留对更新道具的引用。我试过使用 useRef 钩子并将其作为参数发送到登录，但这也不起作用。

我也尝试使用 email 和 password 属性作为 useEffect 依赖项，但这会触发 recaptcha 生成很多次，而且效率很低。

感谢您的帮助！

Answer 1

似乎工作

window.login = useCallback(() => {
        console.log(props);
        firebaseLogin(props.email, props.password).then(() => {
             ...
            }
        ).catch(function (error) {
            console.log(error);
            ....
            }
    }, [props]);

useEffect(() => {
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('login-button', {
                'size': 'invisible',
                'callback': () => window.login(),
            }
        );
        window.recaptchaVerifier.render();
    }, []);

还有一个问题，但与本题无关

Answer 2

使用回调挂钩以高效的方式访问最新状态。

    const login = useCallback( () => {
        console.log(props)
        firebaseLogin(props.email, props.password).then(() => {
                ...
            }
        ).catch(function (error) {
            console.log(error);
            ...
        });
    }, [ props ] ):

在官方 React 文档中，它声明：“传递一个内联回调和一组依赖项。useCallback 将返回回调的记忆版本，只有当其中一个依赖项发生更改时才会更改。”在我们的例子中，登录函数会在每次[props] 更改时自行更新，这意味着当我们获得新的道具时，我们会获得一个新的登录函数。

查看官方hook documentation了解更多关于如何使用哪个钩子的信息。

您甚至可以将useCallback 用于所有三个功能！

    const onChangePassword = useCallback( (event) => {
        props.onChangePassword(event.target.value)
    }, [props.onChangePassword]);

    const onChangeEmail = useCallback( (event) => {
        props.onChangeEmail(event.target.value)
    }, [props.onChangeEmail]);

每当您的 props.onChangePassword 和 props.onChangeEmail 函数从 redux 或高阶组件更新时，onChangePassword 和 onChangeEmail 回调函数都会更新并创建新函数。