如何'await' setState 更新或具有相同效果的内容？

Question

我有一个事件处理程序函数，它更新一些状态，然后根据相同的状态生成一个条件。当然，条件并没有反映更新后的状态。有没有办法等待状态的改变？如果没有，我该如何实现？

async function handleClick(event) {
console.log(values)
// make sure email is not empty
if (values.email.length === 0) {
setErrors({...errors, email: [{msg: "Email can not be empty."}]});
}
// make sure password is not empty
if (values.password.length === 0) {
setErrors((prev) => ({...prev, password: [{msg: "Password can not be empty."}]}));
};
console.log('about to submit: ', errors);
if (errors.email || errors.password) return;
console.log('data is clean');
}

Answer 1

React状态更新是异步处理的，但useState状态更新器函数是完全同步的，不会返回Promise，因此不能等待。

您可以在处理程序中收集错误并发布单个状态更新。

function handleClick(event) {
console.log(values);
const errors = {};
// make sure email is not empty
if (values.email.length === 0) {
errors.email = [{msg: "Email can not be empty."}];
}
// make sure password is not empty
if (!values.password.length) {
errors.password = [{msg: "Password can not be empty."}];
};
console.log('about to submit: ', errors);
if (Object.keys(errors).length) { // if there are errors
setErrors(errors);
return;
}
console.log('data is clean');
}