我有一个表单应该注册每个输入（通过useState）并不断检查它是否有效（通过useEffect），但是console.log似乎总是返回一个过时的检查，所以我认为它首先检查它是否有效并且然后注册更改。
//SAVING INPUTS
const [values, setValues] = useState({})
function handleChange(e) {
setValues({ ...values, [e.target.id]: e.target.value })
}
//VALIDATING FORM
const [validation, setValidation] = useState({ emailValid: false })
useEffect(() => {
handleEmail()
console.log(validation)
}, [values])
function handleEmail() {
const { email } = values
const emailIsValid = /[\w]+@[\w]+.(com|br|net)/.test(email)
setValidation({ ...validation, emailValid: emailIsValid })
}这是表单的输入字段：
<div className="inputbox">
<label htmlFor="email">E-mail</label>
<input type="text" id="email" required onChange={e => handleChange(e)} />
</div>回答1
你的代码很好。因为 console.log(validation) 在 setValidation({ ...validation, emailValid: emailIsValid }) 之前运行。更新状态是异步的https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
回答2
使用另一个 useEffect 显示验证
useEffect(() => {
console.log(validation)
}, [validation])