如何在 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 为真（因此我的微调器从未出现）。实现这种功能的最佳方式是什么。

Answer 1

只要 showSpinner 状态为 false 就显示 Spinner，当它变为 false 时隐藏它

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

并且在您的组件中，您可以从 componentWillMount 生命周期中的 API 加载数据，当加载完成并且您从 API 的调用中返回数据时可以将 showSpinner 状态更新为 false，这将自动隐藏 SpinnerComponent 并显示您想要显示的任何其他内容。

componentWillMount() {
    loadData().then((data) => {

        // Here I consider get data from from you API request

        this.setState({
           data,
           showSpinner: false
        });
    })
}

Answer 2

我看到你在回调中传递了 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,
        })
    }));

Answer 3

问题出在我的 API 函数即时解析上。

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

How can I display a spinner in a React App?

asynchronous

callback

spinner

async-await

reactjs