在状态更改后，谷歌回复没有渲染

Question

我有一个Next.js应用程序，它使用的是react google repatcha。我在多部分表单中使用它，当用户在表单中前进时，我会更改视图。当用户到达具有ReCAPTCHA的视图时，它将正确加载。但是，如果用户单击"上一步"(更改视图状态并卸载ReCAPTCHA(，然后单击"下一步"返回到带有ReCAPTCHA的视图，则不会渲染。

有没有办法纠正这个问题？

const View1 = ({onNext}) => ...
const View2 = ({onNext, onBack}) => ...
const View3 = ({onBack}) => {
const recaptchaRef = createRef()
const onReCAPTCHAChange = (captchaCode) => {
if(!captchaCode) return
console.log(captchaCode)
}
return (
<div className="p-4 rounded bg-gray-100">
<div>View 3</div>
<div>
<ReCAPTCHA
ref={recaptchaRef}
size="compact" // invisible, normal, compact
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
onChange={onReCAPTCHAChange}
badge="inline" // bottomright, bottomleft, inline
/>
</div>
<div className="flex items-center gap-4">
<button className="btn-primary" onClick={onBack}>Back</button>
</div>
</div>
)
}
export default function Sandbox() {
const [view, setView] = useState(1)
return (
<div>
{
view===1 ? <View1 onNext={()=>setView(2)} /> :
view===2 ? <View2 onNext={()=>setView(3)} onBack={()=>setView(1)} /> :
view===3 ? <View3 onBack={()=>setView(2)} /> : null
}
</div>
)
}

Answer 1

我猜您使用的是Reactjs版本18，我通过以下操作修复了它https://github.com/dozoisch/react-google-recaptcha/issues/250我们需要将react谷歌captcha更新到3.0.0测试版