我正在制作一份与验证相关的表格。验证后,我必须显示错误。因此,我使用了useState()
钩子,如下所示。但是似乎我无法更新新状态,因为它总是返回初始值。我哪里出错了?
import React, { useState } from 'react';
import './index.css';
const Firstname = ({ handleInputChange, firstName }) => {
const [error, setError] = useState('hi');
const handleBlur = (event) => {
const { value } = event.target;
validateFirstName(value);
}
const validateFirstName = (name) => {
if (name.trim().length === 0) {
setError('Enter first Name');
}
console.log(error);
}
return (
<>
<label>First Name</label>
<input type='text'
placeholder='Eddard'
name='firstName'
value={firstName}
onChange={handleInputChange}
onBlur={handleBlur} />
</>
)
}
export default Firstname;
我尝试console.log(error)
,但它总是返回initial state
hi
。
答案 0 :(得分:1)
这是因为状态更新是异步的。
您需要console.log(error)
之前return
才能在每个渲染器上看到它。
答案 1 :(得分:0)
在输入中,您应该使用defaultValue
而不是value
<input type='text'
placeholder='Eddard'
name='firstName'
defaultValue={firstName}
onChange={handleInputChange}
onBlur={handleBlur} />
如果将日志移动到if语句中,那也更好
const validateFirstName = (name) => {
if (name.trim().length === 0) {
setError('Enter first Name');
console.log(error);
}
}
答案 2 :(得分:0)
setState是异步的,如果您需要捕获新值,则可以使用useEffect。