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

Question

当用户单击“销售概览”选项卡时，我想发出 axios 请求，然后更新该选项卡中的各种图表。我能够发出 axios 请求、获取数据甚至获取数据。但是，在我第一次单击“销售概览”选项卡时，除了以前的仪表板组件数据（或我之前所在的任何选项卡）之外，我什么也没看到。但是在单击另一个随机选项卡，然后单击“销售概览”选项卡后，我能够看到我想要的数据。这是一个安装问题吗？

这里是父搜索组件代码：

类搜索扩展组件{ 状态 = { 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 组合中的图表（即使第一次单击“销售概述”选项卡时正在获取数据）。

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

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

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
}

您可以在数据为空时在子组件中显示加载器，这样可以从父组件中删除您的检查