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

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

Answer 2

有两种选择。使用承诺异步等待由于地图可以与等待一起使用，我认为const tempState = this.state.codeToclass; await tempState.map(...这种方式可以工作:)

Answer 3

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 promisesawait Promise.All(promises);// then continue to execution