reactjs - 如何在 React App 中显示微调器？

Question

我有一个 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,
                    })
                );

但是状态显示showSpinner是真实的（因此我的微调器从未出现）。实现这种功能的最佳方法是什么。

标签： reactjsasynchronousasync-awaitcallbackspinner

Answer 1

我看到你在回调中传递了 setState 的结果then。你试过了吗：

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