这种"please wait"实现有什么问题？

Question

>我有一个具有以下逻辑的 React 组件：

1. 页面加载并检查支持的后端前提条件过程是否完成
2. 如果支持的后端前提条件过程未完成，则页面将显示"完成设置"按钮，供用户单击以触发此按钮
3. 单击"完成设置"按钮将触发支持的后端前提条件过程。
4. isFinalizing 变量 true 设置为 state 而后端进程正在完成
5. isFinalizing state var of true 应将"完成设置"按钮更改为"请稍候">

状态变量和条件呈现包含在下面的代码中。 我实施睡眠程序只是为了模仿一些工作。 目前，"完成付款周期设置"显示在初始页面呈现中，但单击按钮后文本不会更改为"请稍候"。 知道我在这里错过了什么吗？

finalizePaymentCycleSetup(){
this.setState({isFinalizing:true}, () => {
//sleep for 3 seconds
var e = new Date().getTime() + (3 * 1000);
while (new Date().getTime() <= e) {}      
});
this.setState({isFinalizing:false});
this.setState({paymentCycleSetupIsFinalized: false});
}
{ !paymentCycleSetupIsFinalized && (
<div id="divFinalizeSetup">
<input type="button"
value={ this.state.isFinalizing ? "Finalizing Setup...Please Wait..." : "Finalize Payment Cycle Setup" }
style={{backgroundColor:'cornflowerblue', color:'white', position:"relative", left:-100}}
onClick={() => { this.finalizePaymentCycleSetup() }}            
></input>
</div> 
)}

Answer 1

更改finalizePaymentCycleSetup如下，您应该在 API 调用中使用setState

finalizePaymentCycleSetup(){
this.setState({isFinalizing:true}, () => {
//sleep for 3 seconds
setTimeout(()=>{ this.setState({isFinalizing:false,paymentCycleSetupIsFinalized: false}); console.log('hgfd')},3000)   
});
}