在设置用于api调用的函数中的状态后，不显示加载程序。

Question

我目前正在根据用户单击的选项卡在我的SalesOverview1 comp中获取月/季度/年度数据。在获取数据之后，我将填充基于月度/季度/年度度量的图表。以下是三个选项卡：

​

​

问题是，在单击月度/季度/年度选项卡后，获取数据的过程会出现延迟，但即使我将其添加到代码中，也无法看到加载程序。

我使用的是一个名为used的状态，默认设置为false，但是当用户单击月度/季度/年度选项卡时，它会在我使用的函数中设置为true。在api调用完成后，在函数中再次将其设置为false。以下是SalesOverview1 comp：

   lass SalesOverview1 extends Component {

state = {
    page_id: 4,
    hcp_id: 101,
    sales_overview_data: [],
    show_data: false,
    time_period: 'month',
    loading: false
}

  toggleTimePeriod = (timePeriod) => {
    this.setState({ ...this.state, loading: true, sales_overview_data: [] });
    let monthly = false;
    let quarterly = false;
    let yearly = false;
    if (timePeriod === 'month') {
        monthly = true;
    }
    else if (timePeriod === 'quarter') {
        quarterly = true;
    }
    else if (timePeriod === 'year') {
        yearly = true;
    }
    console.log('Clicked on sales Overview time period tab');
    console.log('state: ', this.state);
    axios.post('/test-json', {
        page_id: this.state.page_id,
        hcp_id: this.state.hcp_id,
        time_period: timePeriod
    })
        .then((res) => {
            this.setState({ ...this.state, loading: true });
            this.setState({ ...this.state, sales_overview_data: res.data });
            console.log('State after loading data in sales overview time period tab: ', this.state);
            this.setState({ ...this.state, loading: false });
        }, (error) => {
            console.log(error);
        });
    this.setState({ ...this.state, monthly: monthly, quarterly: quarterly, yearly: yearly });
    console.log('state inside toggletimeperiod: ', this.state);
}

正如您在上面看到的，我在toggleTimePeriod函数中将加载状态设置为true，然后在获取api数据后将其设置为false。

以下是返回代码：

  <>
            <div role="tabpanel" id="tablet-3" class="tab-pane" >
                <div class="panel-body" style={{ backgroundColor: "rgb(243,243,244)", border: "none", margin: 0 }}>
                    {
                        this.state.sales_overview_data.length === 0 || this.state.loading === true ?
                            <>
                                <Loader
                                    style={{ marginLeft: '450px', marginTop: '10px' }}
                                    type="Circles"
                                    color="#0caf8d"
                                    height={50}
                                    width={50}
                                    radius={30}
                                />
                            </>
                            :
                            <>
                                <div class="row " style={{ marginBottom: 15 }} >
                                    <div class=" col-12 float-right">
                                        <div class="btn-group">
                                            <button onClick={() => { this.toggleTimePeriod('month') }}
                                                Monthly
                                            </button>
                                            <button onClick={() => { this.toggleTimePeriod('quarter') }}
                                                Quarterly
                                            </button>
                                            <button onClick={() => { this.toggleTimePeriod('year') }}
                                                Yearly
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class='row'>
                                    {
                                        this.state.sales_overview_data.length !== 0 &&
                                        <ChartBox
                                            data={this.state.sales_overview_data[401]}
                                        />
                                    }
                               .....................

我没有在上面的代码中添加结束的div，你们可以假设这没有问题。在html中，我首先检查状态sales_overview_data的长度和状态加载的布尔值，并在此基础上决定加载程序。如果我最初在仪表板选项卡上，然后单击Sales概述选项卡，我会看到加载程序，它可以正常工作。但是，当我已经在“销售概述”选项卡上，然后当我单击“季度”时，我看不到加载程序。但是，在获取数据之后，图表会自动更新。

我想在我的功能中设置状态是有问题的。您不需要查看所有的代码，只需了解我设置加载状态的位置。

增加了一张州的截图。请看下面的几行：“状态内部销售概述comp：”。在返回开始之前，我在我的渲染中记录它。

​

​

Answer 1

根据库的文档，您所使用的is是一个visible支柱，可能应该设置为true，以便显示旋转器：

<Loader
    visible={this.state.loading}
    style={{ marginLeft: '450px', marginTop: '10px' }}
    type="Circles"
    color="#0caf8d"
    height={50}
    width={50}
    radius={30}
/>

编辑：

问题可能是，通过将旧的false扩展到状态更新，在axios.post()之后再次将加载状态设置为this.state。您能用它替换toggleTimePeriod的代码并尝试它是否有效吗？：

toggleTimePeriod = (timePeriod) => {
    this.setState({
        loading: true, 
        sales_overview_data: [],
        monthly: timePeriod === 'month',
        quaterly: timePeriod === 'quarter',
        yearly: timePeriod === 'year',
    });

    axios.post('/test-json', {
        page_id: this.state.page_id,
        hcp_id: this.state.hcp_id,
        time_period: timePeriod
    }).then(res => {
        this.setState({
            loading: false, 
            sales_overview_data: res.data,
        });
    }, error => console.log(error)); 
}