javascript - 反应等待一个循环（和 setState）在另一个循环之前完成

Question

 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，即状态已更新。但它一直按此顺序运行。有没有办法来解决这个问题？

标签： javascriptreactjsforeachstate

Answer 1

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)
}