时间戳

首页 > 解决方案 > 在用于 api 调用的函数内设置状态后未显示加载程序

javascript - 在用于 api 调用的函数内设置状态后未显示加载程序

问题描述

我目前正在根据用户单击的选项卡在我的 SalesOverview1 组合中获取月度/季度/年度数据。获取数据后，我正在填充基于月度/季度/年度指标更新的图表。以下是 3 个选项卡：

在此处输入图像描述

问题是，在单击月度/季度/年度选项卡后，在获取数据时会出现延迟，但即使我已在代码中添加了加载器，我也无法看到它。

我正在使用一种称为加载的状态，默认情况下设置为 false，但是当用户单击月/季/年选项卡时，它会在我使用的函数中设置为 true。api调用完成后，我在函数内部再次将其设置为false。这是 SalesOverview1 组合：

   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 的长度和状态加载的布尔值，并据此决定加载程序。如果我最初在仪表板选项卡上，然后单击销售概览选项卡，我会看到加载程序并且它工作正常。但是，当我已经在“销售概览”选项卡上，然后单击“季度”时，我看不到加载程序。但是，在获取数据后，图表会自动更新。

我认为我在函数中设置状态的位置存在问题。您无需浏览所有代码，只需在我设置加载状态的位置即可。

已添加状态的屏幕截图。请看下面的行：'state inside sales overview comp:'。在返回开始之前，我将控制台记录在我的渲染中。

在此处输入图像描述

标签： javascriptreactjsaxios

解决方案

根据您正在使用的库的文档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.statetoggleTimePeriod

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

推荐阅读