Значение React useState не обновляется в обратном вызове ref. - PullRequest
Новая
       48

Значение React useState не обновляется в обратном вызове ref.

0 голосов
/ 16 января 2020

У меня есть функциональный компонент с именем SignUp, который использует Google Recaptcha для защиты формы регистрации.

Signup создает ссылку, указывающую на компонент Recaptcha, и объявляет функцию обратного вызова onResolved, которая указывает на метод функции onRecaptchaResolved

Проблема заключается в том, что когда onRecaptchaResolved вызывается после выполнения Recaptcha, значение нашего ввода не является последним состоянием, а начальным значением, установленным useState в нашем случае "hi" 

import React, { useState } from 'react';
import styled from 'styled-components';
import Recaptcha from 'react-google-invisible-recaptcha';

const Input = styled.input``

function SignUp({dispatch}) {
    const [inputValue, setInputValue] = useState("hi");
    let recaptcha = null; // this will be our ref

    const formSubmit = () => {
         recaptcha.execute()
    }

    const onRecaptchaResolved = ( recaptchaToken) => {
         console.log(inputValue); // always logs; "hi"
    }


    return (
        <>          
            <Input 
                placeholder="you@example.com"
                type="text"
                value={inputValue}
                onChange={e => setInputValue(e.target.value)
                }
            />
            <Recaptcha
                ref={ ref => recaptcha = ref }
                sitekey={ "{MY_SITE_KEY}" }
                onResolved={recaptchaToken =>{ onRecaptchaResolved(recaptchaToken)} } 
            />

            <SubmitButton onClick={formSubmit}> Submit email</SubmitButton>
        </>
    )
}

Как мне убедиться, что входное значение прочитано в onRecaptchaResolved это обновленное значение?

1 Ответ

1 голос
/ 16 января 2020

react-google-invisible-recaptcha, кажется, сохраняет начальное значение, указанное в onResolved, и не будет обновлять его, пока <Recaptcha> не будет перемонтирован. См. https://github.com/szchenghuang/react-google-invisible-recaptcha/blob/master/src/index.js#L41

Самый простой способ подтвердить это - установить key на <Recaptcha>, который изменяется при изменении inputValue.

...