传递axios请求数据后组件未重新挂载

Question

当用户单击Sales Overview选项卡时，我想发出axios请求，然后更新该选项卡中的各种图表。我能够发出axios请求，获取数据，甚至获得数据。然而，在第一次点击Sales Overview选项卡时，除了前面的仪表板组件数据（或者前面的任何选项卡），我看不到任何东西。但点击另一个随机选项卡，然后点击Sales Overview选项卡，我就可以看到我想要的数据了。这是一个越来越大的问题吗？

下面是父搜索组件代码：

类搜索扩展组件{state={hcp_id:101,sales_overview_data:[],page_id_sales_overview:4,}

salesOverviewClicked = () => {
    // this.props.salesOverviewDataFromParent(this.state.sales_overview_data);
    console.log('Clicked on sales Overview!');
    let page_id = this.state.page_id_sales_overview;
    let hcp_id = this.state.hcp_id;
    console.log('state: ', this.state);
    axios.post('/test-json', {
        page_id: page_id,
        hcp_id: hcp_id
    })
        .then((res) => {
            const dataRequest = res.data;
            console.log('State before loading data in sales overview: ', this.state);
            console.log('received data inside sales overview', res.data);
            this.setState({ ...this.state, sales_overview_data: res.data });
            console.log('State after loading data in sales overview: ', this.state);
            // this.props.salesOverviewDataFromParent(this.state.sales_overview_data);
        }, (error) => {
            console.log(error);
        });
}


 return(
      <div>
                            <ul class="nav nav-tabs" role="tablist">
                                <li><a class="nav-link active" data-toggle="tab" href="#tablet-1"> <i class="fa fa-th-large"></i>Dashboard</a></li>
                                <li><a class="nav-link " data-toggle="tab" href="#tablet-2" > <i class="fa fa-envelope"></i>Engage with HCP</a></li>
                                <li><a class="nav-link " data-toggle="tab" href="#tablet-3" onClick={this.salesOverviewClicked}> <i class="fa fa-bar-chart-o"></i>Sales Overview</a></li>
                                <li><a class="nav-link " data-toggle="tab" href="#tablet-4"> <i class="fa fa-handshake-o"></i>Promotional Activity</a></li>
                                <li><a class="nav-link " data-toggle="tab" href="#tablet-5"> <i class="fa fa-user-circle"></i>Patient Analysis</a></li>
                            </ul>
                        </div>
    <div class="tab-content">
                            {this.state.receivedData.length !== 0 && <Dashboard data={this.state.receivedData} />}
                            <EngageWithHCP />
                            {this.state.sales_overview_data.length !== 0 && <SalesOverview1 key = {this.state.sales_overview_data} data={this.state.sales_overview_data} />}
                            <PromotionalActivity1 />
                            <PatientAnalysis1 />
                        </div>

下面是SalesOverview1子组件：

 return(
 <div class='row'>
                        {
                            <ChartBox
                                data={this.props.data[401]}
                            />
                        }
   )

除非我首先单击其他选项卡，然后返回到SalesOverview1选项卡，否则不会显示SalesOverview1 comp中的图表（尽管数据是在第一次单击SalesOverview1选项卡时提取的）。

以下是选项卡的基本视图：

我想当我点击选项卡时，由于请求需要时间，数据不会更新，默认情况下我会看到前面的选项卡数据。但一旦获取数据，我就看不到那个选项卡上的数据，因为选项卡组件应该重新挂载，这显然没有发生。怎么做？

Answer 1

在子组件中添加

componentWillReceiveProps(nextProps){
 // see if nextProps contains updated Data after data being fetched
 // if yes add state in child component and put data from nextprops and use state instead of this.props in render method
}

当数据为空时，您可以在子组件中显示loader，为此从父组件中删除您的检查