在触发下一个 function 之前等待 function 设置状态

Question

async componentDidMount() {
    this.loadSelectors();
    this.useSelectors();
};


loadSelectors = () => {
    this.setState({"Selector": "Test"});
}

useSelectors = () => {
    console.log(this.state.Selector);
}

在调用useSelectors()之前，如何等待loadSelectors()完成设置 state ？ 我知道这样做的正常方法是

this.setState({"Selector": "Test"}, => this.useSelectors());

但我的情况似乎不同，我试过了

async componentDidMount() {
    await this.loadSelectors(() => useSelectors());
}

它不起作用。

Answer 1

似乎您想loadSelectors this.setState返回任何内容。 它应该返回一个 promise ，它在回调（应该传递给setState ）被调用时解析：

var loadSelectors = () => new Promise(resolve =>
    this.setState({"Selector": "Test"}, resolve)
);

使用await时要遵循的一条规则：如果目标是等待某个未来事件，那么它后面的表达式应该是 promise，否则不会有太多等待。

Answer 2

我设法弄清楚我需要什么，只需将useSelectors function 作为回调 function 传递并在loadSelectors中使用它

componentDidMount() {
    this.loadSelectors(() => this.useSelectors());
};


loadSelectors = (callbackFunction) => {
    this.setState({"Selector": "Test"}, callbackFunction);
}

useSelectors = () => {
    console.log(this.state.Selector);
}