Javascript 正在等待所有设置状态完成更新

在父组件中，我渲染多个子组件以及一个“保存”按钮。单击“保存”按钮时，将调用以下方法：

 submit() { 
   validateControls();
 }

 validateControls() {
    for (var key in this.refs) {
        let ref = this.refs[key];
        ref.setState({ force: true });
    }
}

理想情况下，validateControl方法应该在所有引用中循环，并为每个组件调用setState。设置此状态将强制组件重新渲染，当然，当验证在组件内完成时，会对其自身进行验证

如果无效，则子组件的类名将为“invalid”，因此在调用validateControl（）之后，submit方法将检查名称为“invalid”的类是否存在，如果存在，则页面无效

但是，我遇到的问题是for循环没有等待setState完成，因此当validateControl（）方法完成时，没有一个控件的类名为“invalid”

---

是否有方法等待setState完成，然后转到for循环中的下一个循环？

如果将函数作为

setState

的最后一个参数传递，则在设置状态后将调用该函数

以下是一个例子：

async submit() { 
  await validateControls();
}

async changeRefState(ref) {
    return new Promise(resolve => {
        ref.setState({ force: true }, resolve);
    })
}

async validateControls() {
    for (var key in this.refs) {
        await this.changeRefState(this.refs[key])
    }
}

在任何情况下，使用引用与子组件交互都不是最好的方法，最好通过道具来实现