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

问题描述

我有一个React App，我想展示一个微调器，何时处理需要一些时间才能完成，例如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 为真（因此，我的微调器永远不会出现）。实现这种功能的最佳方法是什么。

解决方法

您可以做的是只要showSpinner状态为假，就显示微调框，并在状态变为假时将其隐藏

{ !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
        });
    })
}

,

我看到您在回叫then中传递了setState的结果。您是否尝试过：

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函数即时解析上。