[英]React Hooks: setState hook inside map function
我目前正在与表单的 setState 的异步性质搏斗,我的预期行为是,当用户单击 submitForm 按钮时,它会检查 state 中的所有表单值,如果该值为空,则它会为该特定表单元素设置 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 之后,它只将错误 object 中的最后一个值设置为 true(因此 errors.mobileNumber = true)。 而不是使所有符合条件的值都为真。 扩展运算符 {...errors} 将值覆盖为初始 false 值。如果 values 数组中的值为空,是否可以将错误中的每个键设置为 true?
请任何帮助将不胜感激
我将通过映射值的条目立即构造全新的错误 object,然后您可以使用该 object 调用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.