React useState 值未在 ref 回调中更新

Question

我有一个名为 SignUp 的功能组件，它使用 google recaptcha 来保护注册表单。

Signup 创建一个指向 Recaptcha 组件的 ref 并声明一个指向函数方法 onRecaptchaResolved

的回调函数 onResolved

问题是当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中读取的输入值是更新后的值？

Answer 1

react-google-invisible-recaptcha 似乎存储了 onResolved 中提供的初始值并且不会更新它，除非重新安装 <Recaptcha>。看 https://github.com/szchenghuang/react-google-invisible-recaptcha/blob/master/src/index.js#L41

确认这一点的最简单方法是在 <Recaptcha> 上设置一个 key，它会随着 inputValue 的变化而变化。

React useState 值未在 ref 回调中更新

React useState value not updated in ref callback

javascript

ref

reactjs

react-functional-component

use-state