如何解决反应setstate在循环上无法正常工作
我从后端收到一个像这样的数组的验证响应
[
{ param: "secondName",msg: "second name is required" },{ param: "password",msg: "password is required" }
]
我的反应组件中有一个状态,像这样
const [errs,setErrs] = useState({
firstName: null,secondName: null,password: null,email: null,})
目标是仅在response.params
表单上提交的状态更改我的状态,其余部分照原样null
保留。
这就是我尝试过的:
const submitFoo = () => {
console.log(localErrs) //all props are set to null (default)
res.forEach((single) => {
setLocalErrs({
...localErrs,[single.param]: single.msg
});
});
console.log(localErrs);//only password is set to the `response.msg`,instead of `password` AND `secondName`
};
但是问题是它只是更改了我“错误状态”中的最后一项; 输出是:
{
first: null,second: null,password: 'password is required',}
ps:我通过循环遍历数组并将Errs obj的props直接设置为response.msg来尝试使用香草js,它起作用了。所以问题必须与react setstate一起使用
解决方法
尝试使用胖箭头方法来设置状态,如下所示:
setLocalErrs(localErrs => ({ ...localErrs,[single.param]: single.msg }));
避免由于不同的异步调用等原因同时调用两次setter函数的状态丢失。
,避免更新state in a loop。更新状态,如:
let errObj = {}
res.forEach((single) => {
errObj[single.param] = single.msg
})
setLocalErrs({
...localErrs,...errObj
})
顺便说一句,您可以简单地使用:
setLocalErrs(errObj)
由于errObj
具有所有更新的状态值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。