等待延迟加载状态的初始化

Question

我有一个按钮和一个onClick处理程序。我在onClick处理程序中的第一个想法是

if (this.state.lazyLoadedData === undefined) {
    await this.loadData();
}

我的问题是，如果我快速点击按钮两次，this.loadData()会被执行两次。

解决这个问题的打字稿/反应惯用方法是什么？

Answer 1

习惯的方法是始终使用显式承诺来访问延迟加载的数据。

在某处声明并初始化

loadDataPromise: Promise<YourDataType> | undefined = undefined;

然后，在onclick处理程序

if (!this.loadDataPromise) {
    this.loadDataPromise = this.loadData();
}

this.loadDataPromise.then(yourDataHere => {
});