时间戳

首页 > 解决方案 > 等待所有 setStates 完成更新

javascript - 等待所有 setStates 完成更新

问题描述

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

 submit() { 
   validateControls();
 }

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

validateControls 方法理想情况下应该遍历所有 refs，并为每个组件调用 setState。设置此状态，将强制组件重新渲染并在组件内完成验证时验证自身。

子组件如果无效则有一个类名“invalid”，所以最后调用 validateControls() 后，submit 方法会检查是否存在名为“invalid”的类，如果存在则页面无效。

但是，我遇到的问题是 for 循环没有等待 setState 完成，因此当 validateControls() 方法完成时，没有一个控件具有“无效”作为类名。

有没有办法等待 setState 完成然后进入 for 循环中的下一个循环？

标签： javascriptreactjs

解决方案

如果您将函数作为 的最后一个参数传递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 来做到这一点。

推荐阅读