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

Question

У меня есть функциональный компонент под названием 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="[e-mail]"
                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 это обновленное значение?

Answer 1

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

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