React Hooks:map函数中的setState钩子

Question

我目前正在与表单的 setState 的异步性质作斗争，我的预期行为是当用户单击提交表单按钮时，它会检查状态内的所有表单值，如果该值为空，然后为该特定表单元素设置 errorState，以便出现错误消息

const [values, setValues] = React.useState({
firstName: '',
lastName: '',
id: '',
city: '',
emailAddress:'',
mobileNumber: ''
});
const [errors, setError] = React.useState({
firstName: false,
lastName: false,
id: false,
city: false,
emailAddress: false,
mobileNumber: false
})
const submitForm = () => {
const setErrorArray = Object.keys(values).map((key) => {
if (values[key] === '') {
setError({...errors, [key]: true })
}
});
}

我相信这个问题是由于setState是异步的，所以在.map完成后，它只将错误对象内的最后一个值设置为true(因此errors.mobileNumber = true(。而不是使与条件匹配的所有值都为 true。点差运算符 {...错误} 将值覆盖为初始假值。如果值数组中的值为空，是否有办法实现错误中的每个键都设置为 true？

请任何帮助将不胜感激

Answer 1

我会通过映射值的条目来一次构造全新的 errors 对象，然后您可以使用该对象调用setError：

const values = {
firstName: 'first',
lastName: 'last',
id: '',
city: '',
};
const newErrors = Object.fromEntries(
Object.entries(values).map(
([key, val]) => [key, val === '']
)
);
console.log(newErrors);
// setError(newErrors);