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

Question

当用户单击Sales Overview选项卡时，我想发出一个axios请求，然后更新该选项卡中的各种图表。我能够发出axios请求，获取数据，甚至获取数据。但是，在我第一次单击Sales Overview选项卡时，除了之前的Dashboard component data(或我之前所在的任何选项卡)之外，什么也看不到。但是，在单击另一个随机选项卡，然后单击Sales Overview选项卡之后，我可以看到我想要的数据。这是一个越来越严重的问题吗？

以下是父搜索组件代码：

类搜索扩展了组件{sales_overview_data={ 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内的图表(即使在第一次单击Sales Overview选项卡时会获取数据)。

以下是选项卡的基本视觉效果：

​

​

我认为当我点击选项卡时，由于请求需要时间，所以数据不会更新，并且默认情况下我会看到以前的选项卡数据。但是一旦获取了数据，我就看不到该选项卡上的数据了，因为应该重新挂载选项卡组件，而这显然并没有发生。如何做到这一点？

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
}

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