如何解决React在另一个循环之前等待一个循环和setState完成
handleSubmit = () => {
this.setState({ modalState: false })
this.state.codeToClass.forEach((code,classId,map) => {
const cr = _.find(this.state.classRoles,{ id: classId })
if (code === cr.classCode) {
console.log('here')
this.setState(state => ({
classRoles: state.classRoles.map((cc) => {
console.log(cc.id)
console.log(classId)
console.log(cc.id === classId)
if (cc.id === classId) {
console.log('here1')
return {
...cc,role: 'TA',}
}
console.log('what')
return cc
}),}),()=> console.log(this.state.classRoles)) //this is called later
} else {
NotificationManager.error('Failed to register as TA.')
}
})
console.log(this.state.classRoles) //this is called first
this.state.classRoles.forEach((c) => {
if (c.role === '') {
api.deleteClassUser(c.id,this.state.user.id)
} else {
api.postAddClass(c.id,this.state.user.id,c.role)
console.log(c)
}
})
EventEmitter.publish('currentlyEnrolled',this.state.classRoles)
}
我正在尝试在第一个forEach完成之后运行第二个forEach,即状态已更新。但是它一直按此顺序运行。有办法解决这个问题吗?
解决方法
有两个选项。
- 使用承诺
- 异步等待
我认为既然地图可以用于等待状态
const tempState = this.state.codeToclass;
await tempState.map(...
这种方式可以工作:)
, Promise
是你的朋友。
// You map your operations in to Promises.
const promises = this.state.codeToClass.map((code,classId,map) => {
return new Promise(resolve=>{
const cr = _.find(this.state.classRoles,{ id: classId })
if (code === cr.classCode) {
console.log('here')
this.setState(state => ({
classRoles: state.classRoles.map((cc) => {
console.log(cc.id)
console.log(classId)
console.log(cc.id === classId)
if (cc.id === classId) {
console.log('here1')
return {
...cc,role: 'TA',}
}
console.log('what')
return cc
}),}),()=> resolve()) //this is called later
} else {
NotificationManager.error('Failed to register as TA.')
}
})
})
// and then you wait for all of the promises
await Promise.All(promises);
// then continue to execution
,
this.setState是异步操作。
您可以尝试以下操作:
handleSubmit = () => {
//some code...
this.setState(state => ({
state.codeToClass.forEach((...args) => {
//logic to update the state...
});
}),setClassRoles); //call a function after the state value has updated
}
setClassRoles = () => {
this.state.classRoles.forEach((...args) => {
//your code...
});
EventEmitter.publish('currentlyEnrolled',this.state.classRoles)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。