通过异步功能禁用按钮答案

【问题标题】：Disable button via async function通过异步功能禁用按钮
【发布时间】：2020-12-12 09:38:05
【问题描述】：

在我的 react.js 组件中，我渲染了一个按钮来创建 PDF

<Button onClick={() => this.goCreatePdf()} variant="secondary" disabled={this.state.pdfLoading}>
   create PDF
</Button>

该按钮调用一个异步函数，该函数根据给它的数据创建一个 PDF 并返回一个 Promise。

goCreatePdf() {
  this.setState({ pdfLoading: true });
  const pdfFinished = createPdf(this.Data);
  pdfFinished.then((response) => {
      this.finishedCreatePdf();
  });
}

当 PDF 完成时，调用另一个函数将 pdfLoading 设置为 false。

finishedCreatePdf() {
  this.setState({ pdfLoading: false });
}

不幸的是，按钮并没有像我想要的那样禁用和启用。有什么建议吗？

编辑：我希望通过未完成的承诺禁用按钮。

【问题讨论】：

“不幸的是，该按钮没有像我希望的那样禁用和启用” - 当前的行为是什么？预期的行为是什么？
请创建一个代码示例，以便我们更好地帮助您。
我希望通过 promise 禁用的按钮待定。
@JanSchmidt 你做了什么调试？你的代码看起来不错。它到底哪里出错了？ createPdf 是不是跑得太快了，所以你甚至看不到按钮闪烁？
@Bergi 我在this.setState({ pdfLoading: true}) 和this.setState({ pdfLoading: false}) 之后直接添加了consol.log(loading begins) 和consol.log(loading finished)。这似乎工作得很好。只是按钮在我等待时仍然处于活动状态。

标签： javascript reactjs button promise

【解决方案1】：

您的代码看起来不错。如果您错过了输入state 的pdfLoading 属性，您是否仔细检查过？

【讨论】：