SetState未处理React最终表单中的onSubmit

Question

在onSubmit函数上使用setContactInfo/setPassword更新状态时遇到问题。有人能帮我吗？

这是的最终反应形式

<Form
onSubmit={onSubmit}
validate={validation}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<FormGroup>
<Field name='contactInfo'>
{({ input, meta }) => (
<div className='erow'>
<Input
{...input}
type='text'
id='contactInfoID'
placeholder='Email / Phone number'
/>
{errorShowing(meta)}
</div>
)}
</Field>
<Field name='password'>
{({ input, meta }) => (
<div className='erow'>
<Input
{...input}
type='password'
id='passwordID'
placeholder='Password'
/>
{errorShowing(meta)}
</div>
)}
</Field>
</FormGroup>
<FormGroup>
<div className='submit-btn text-center'>
<Button
type='submit'
id='submitID'
className='btn btn-dark px-5 py-2'
disabled={submitting}
>
Signup
</Button>
</div>
</FormGroup>
</form>
)}
></Form>

这些就是函数。

...................
...................
const [contactInfo, setContactInfo] = useState('');
const [password, setPassword] = useState('');
const onSubmit = (values) => {
console.log(values);
setContactInfo(values.contactInfo);
setPassword(values.password);
console.log(contactInfo, password);
window.alert(JSON.stringify({ contactInfo, password }, 0, 2));
};
..............
..............

此处setContactInfo和setPassword不更新状态。我不知道为什么。有人能解释并告诉我这个问题的解决办法是什么吗？

Answer 1

因为setContactInfo和setPassword是异步的，所以在调用这些方法后无法读取更新的值。尝试

useEffect(()=>{
console.log(contactInfo, password);
},[contactInfo, password]);