触发外部事件时组件未呈现

Question

目前，我有这个搜索选项卡和这些中间选项卡，如图所示。

[![在此处输入图片描述][1]][1]

有一个您可能看不到的“仪表板”选项卡，但它是图片中最左侧的选项卡，搜索窗口将其覆盖。当我从下拉列表中单击搜索选项时，我会重定向到仪表板选项卡并首先显示仪表板选项卡的数据。当我在搜索时已经在仪表板选项卡上时，应用程序会获取数据并正确重新加载，并且新数据会针对仪表板选项卡进行更新。但是，如果我在“推荐”选项卡上并单击“搜索”，我会被重定向到“仪表板”选项卡，会获取数据，但是当我切换到“推荐”选项卡时，即使为“推荐”选项卡获取数据，它也会在下方显示一个空白区域建议选项卡。只有当我转到另一个选项卡然后返回到建议选项卡时，才会获取数据并查看其下的数据。谁能让我知道出了什么问题？此问题适用于除仪表板选项卡以外的所有选项卡。

正常时的操作：

1. 在仪表板选项卡上，然后搜索新的 HCP。
2. 再次重定向到仪表板选项卡并正确呈现数据。

出现问题时的操作：

1. 在“建议”选项卡（或实际上是仪表板以外的任何选项卡）上，然后搜索新的 HCP。
2. 被重定向到仪表板选项卡，并为仪表板正确呈现数据。
3. 在切换到“推荐”选项卡时，会获取数据但没有显示任何内容。但是，在转到其他选项卡然后返回“推荐”选项卡时，数据会被获取，甚至可以正确呈现。

只是一点背景信息，我有一个搜索组件，它是所有这些组件的父组件。我在其中维护一个状态，该状态处理选项卡单击，并根据单击的选项卡来渲染该组件。此外，我正在使用 componentDidMount 获取这些子组件（如仪表板、推荐、销售概览等）内的所有数据。

推荐组件的代码如下：

   class Recommendations extends Component {

state = {
    loading: false,
    page_id: 2,
    rec_panel_data: [],
    time_period: 'month',
    starRating: 0,
    declineReason: '',
    searchName: this.props.searchName,
    error: this.props.error
}

componentDidMount() {
    console.log('Clicked on Recommendations!');
    this.setState({ loading: true });
    let page_id = this.state.page_id;
    let npi_id = parseInt(this.state.searchName[0].replace(/(^.*\[|\].*$)/g, ''));
    axios.post('/test-json', {
        page_id: page_id,
        npi_id: npi_id,
        time_period: 'month'
    })
        .then((res) => {
            const dataRequest = res.data;
            console.log('received data inside recommendations comp', res.data);
            this.setState({ rec_panel_data: res.data[212], loading: false });
            console.log('State after loading data in recommendations comp: ', this.state);
        }, (error) => {
            console.log(error);
        });
}

   return (
        <>
            <div role="tabpanel" id="tablet-6" class="tab-pane" >
                <div class="panel-body" style={{ backgroundColor: "rgb(243,243,244)", border: "none", margin: 0 }}>
                    {
                        this.state.rec_panel_data.length === 0 || this.state.loading === true ?
                            <Loader
                                style={{ marginLeft: '450px', marginTop: '10px' }}
                                type="Circles"
                                color="#0caf8d"
                                height={50}
                                width={50}
                                radius={30}
                            />
                            :
                            this.state.error === true ?
                                <div style={{ marginLeft: '350px', marginBottom: '10px' }}>
                                    The data for this HCP is currently unavailable
                                </div>
                                :
                                this.state.loading === true ?
                                    <>
                                        <Loader
                                            style={{ marginLeft: '450px', marginTop: '10px' }}
                                            type="Circles"
                                            color="#0caf8d"
                                            height={50}
                                            width={50}
                                            radius={30}
                                        />

                                    </>
                                    :
                                    <>
                                        <div class="row" style={{ marginTop: '1%' }}>
                                            <div style={{ height: '100%', width: '100%' }} >
                                                <MaterialTable
                                                ......
                                                  />
                                    </>
                              </div>
                              </div>
                          </>
                         } 
                       </div>
                     </div>
                   </>

我没有包含父搜索组件的代码，但正如我所提到的，它会根据点击将选项卡状态更改为“推荐”、“仪表板”等，然后这些组件会被渲染。比如这样：

    {
       this.state.tab_button_clicked === 'recommendations' &&
                                    <Recommendations
                                        key={this.state.finalsearchName}
                                        searchName={this.state.finalsearchName}
                                        error={this.state.error}
                                    />
    }

如果我在组件生命周期方面遗漏了什么，请告诉我。

Answer 1

最终是一个非常小的问题！

为解决问题的 Recommendations 中的最上面的 div 添加了活动类。

  <div role="tabpanel" id="tablet-6" class="tab-pane active" >