Question

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

 submit() { 
   validateControls();
 }

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

validateControls方法最好应遍历所有引用，并为每个组件调用setState。设置此状态将迫使组件重新渲染，并且当然会在组件内部完成验证后对其进行验证。

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

但是，问题是for循环没有等待setState完成，因此，当validateControls（）方法完成时，没有一个控件的类名具有“无效”的含义。

是否有一种方法等待setState完成然后移至for循环中的下一个循环？

Answer 1

如果将函数作为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])
    }
}

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

等待所有setState完成更新

1 个答案: