Javascript React useState值未在ref回调中更新

我有一个名为

SignUp

的功能组件，它使用google recaptcha来保护注册表单

Signup

创建一个指向

Recaptcha

组件的ref，并声明一个回调函数

onResolved

，该函数指向函数方法

onRecaptchaResolved

问题在于，当在Recaptcha执行后调用

onRecaptchaResolved

时，输入的值不是最新状态，而是由

useState

在我们的例子中，

“嗨”

import React，{useState}来自“React”；
从“样式化组件”导入样式化；
从“react google invisible Recaptcha”导入Recaptcha；
常量输入=styled.Input``
函数注册（{dispatch}）{
常量[inputValue，setInputValue]=useState（“hi”）；
让recaptcha=null；//这将是我们的ref
const formSubmit=（）=>{
repactcha.execute（）
}
const onRecaptchaResolved=（recaptchaToken）=>{
console.log（inputValue）；//始终记录；“嗨”
}
返回(
setInputValue（如目标值）
}
/>
recaptcha=ref}
sitekey={{MY_SITE_KEY}}
onResolved={recaptchaToken=>{onRecaptchaResolved（recaptchaToken）}
/>
提交电子邮件
)
}

---

如何确保在

onRecaptchaResolved

中读取的输入值是更新的值？

google invisible recaptcha

似乎存储了

onResolved

中提供的初始值，除非重新装入

，否则不会对其进行更新。看见

确认这一点的最简单方法是在

上设置一个

键，该键在
inputValue
更改时会更改

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>
        </>
    )
}