reactjs - 按执行顺序反应类组件问题

Question

我的 React 类组件中有以下代码。

出于某种原因，我观察到，在内部componentDidMount，尽管await在调用之前有关键字 to this.getKeyForNextRequest()，但执行会跳转到下一个调用this.loadGrids().

我在这里做错了吗？

async componentDidMount() {
    await this.getKeyForNextRequest();
    await this.loadGrids();
}

getKeyForNextRequest = async () => {
    const dataRequester = new DataRequester({
      dataSource: `${URL}`,
      requestType: "POST",
      params: {
      },
      successCallback: response => {
        console.log(response);
      }
});

dataRequester.requestData();
}
loadGrids = async () => {
    await this.loadGrid1ColumnDefs();
    this.loadGrid1Data();
    await this.loadGrid2ColumnDefs();
    this.loadGrid2Data();
}

Answer 1

您可以尝试使用Promise构造函数：

getKeyForNextRequest = () => {
  return new Promise((resolve, reject) => {
    const dataRequester = new DataRequester({
      dataSource: `${URL}`,
      requestType: "POST",
      params: {},
      successCallback: response => {
        console.log(response);
        resolve(response);
      }
    });
  });
}

这可以确保您正在等待一个相关的承诺，一个仅在successCallback完成时才解决的承诺，而不是一个立即解决的承诺，undefined就像您目前拥有的那样。

这被称为“承诺”回调。

如果DataRequester提供基于承诺的模式，请使用它而不是承诺回调。