Reactjs 如何在React应用程序中显示微调器？

我有一个React应用程序，当处理需要一些时间才能完成时，我想显示一个微调器，例如API请求，甚至冗长的状态设置。我尝试了以下回调：

                this.setState({
                    showSpinner: true,
                }, () =>
                    this.APIgiveMeTheWorld().then(
                        this.setState({
                            showSpinner: false,
                        })
                    ));

和异步函数，具有：

                await this.setState({
                    showSpinner: true,
                });
                this.APIgiveMeTheWorld().then(
                    await this.setState({
                        showSpinner: false,
                    })
                );

---

但在任何可识别的点上，state都不会显示showSpinner为真（因此我的微调器从未出现）。实现此类功能的最佳方法是什么。

只要

showSpinner

状态为false，就可以显示微调器，并在它变为false时隐藏它

{ !showSpinner? <SpinnerComponent /> : <ResultShower /> }

---

我看到您已通过回调

中设置状态的结果，然后
。您是否尝试过：

this.setState({
    showSpinner: true,
}, () =>
    //should pass a call back function to call right after api return.
    this.APIgiveMeTheWorld().then(r => {
        this.setState({
            showSpinner: false,
        })
    }));

问题在于我的API函数是即时解决的。
我看到第一个函数可能是正确的。你能提供更多关于如何显示
微调器的细节吗？嗨，VietDinh，showSpinner在渲染函数中用于添加或删除“show”类，CSS应该完成其余的工作。它喜欢吗？是的，但问题不在于显示/隐藏代码，我甚至看不到showSpinner在程序员工具中的变化。这是一个时间问题。有点奇怪，我设计了这个代码笔，它工作得非常好。谢谢Yves，但即使在程序员工具中，状态也不会发生明显的变化。如何显示/隐藏不是一个问题，而是时间。如果你已经解决了你的问题，它应该关闭！
this.setState({
    showSpinner: true,
}, () =>
    //should pass a call back function to call right after api return.
    this.APIgiveMeTheWorld().then(r => {
        this.setState({
            showSpinner: false,
        })
    }));