useState with react 给我问题 onChange 处理程序

Question

我正在使用useState设置一个状态变量，无论是否点击了recaptcha，但是当我使用setState函数时，我的验证码变量在提交时没有传递，不明白为什么，如果我删除setState，验证码变量就会传递给我的onSubmit。如果我删除setSubmitButton（false），一切都很好，不太确定为什么。当我运行 setSubmittButton（false） 验证码在我的提交函数中受到欢迎时，当我没有它时，我在提交函数中得到了正确的验证码值。import React, { useState } from "react"import { useForm } from "react-hook-form"import ReCAPTCHA from "react-google-recaptcha"const ContactForm = () => {  const { register, handleSubmit, watch, errors } = useForm()  const isBrowser = typeof window !== `undefined`  let location  if (isBrowser) {    location = window.location.hostname  }  let fetchUrl  if (location === "localhost") {    fetchUrl = `http://localhost:8888/.netlify/functions/contact`  } else if (location === "fsdf.gtsb.io") {    fetchUrl = `https://fdsfd/.netlify/functions/contact`  } else {    fetchUrl = "/.netlify/functions/contact"  }  console.log(fetchUrl)  const onSubmit = async data => {    setLoading(true)    console.log(captcha, "captcha value final")    const response = await fetch(fetchUrl, {      method: "POST",      body: JSON.stringify({ data, captcha: captcha }),    })      .then(response => response.json())      .then(data => {        console.log(data)        if (data.captcha === false) {          setCaptchaFailed(true)        }      })      .catch(error => {        console.error("Error:", error)      })  }  const [submitButton, setSubmitButton] = useState(true)  const [loading, setLoading] = useState(false)  const [captchaFailed, setCaptchaFailed] = useState(false)  let captcha  function onChange(value) {    setSubmitButton(false) // IF I REMOVE THIS LINE EVERYTHING WORKS FINE ******    console.log("Captcha value:", value)    captcha = value  }  function error(value) {    alert(value)  }

Answer 1

您应该将验证码值存储在状态变量（或 ref）中，而不是普通的 JS 变量中。普通 JS 变量将重置为组件重新呈现时（在更改状态之后）。undefinedsetSubmitButton

const [ captchaValue, setCaptchaValue ] = useState(null);

function onChange(value) {

    setSubmitButton(false); 

    console.log("Captcha value:", value);

    setCaptchaValue(value);

}

const onSubmit = async data => {

    setLoading(true)

    console.log(captchaValue, "captcha value final");

    ...

}

提示：此外，请确保将 html 属性的所有匹配项替换为 。您可以使用 HTML 到 JSX 转换器来自动执行此类任务。forhtmlFor