Javascript 触发外部事件时未渲染组件

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

[！[在此处输入图像描述][1][1]

有一个“仪表板”选项卡，您可能看不到，但它是图片中最左边的选项卡，搜索窗口正在覆盖它。当我从下拉列表中单击搜索选项时，我重定向到Dashboard选项卡并首先显示Dashboard选项卡的数据。当我在搜索时已经在仪表板选项卡上时，应用程序会获取数据并正确地重新加载自己，并且仪表板选项卡的新数据会得到更新。但是，如果我在“建议”选项卡上，单击“搜索”，我会被重定向到“仪表板”选项卡，数据会被提取，但当我切换到“建议”选项卡时，即使为“建议”选项卡提取数据，它也会在“建议”选项卡下显示一个空白区域。只有当我转到另一个选项卡，然后返回到“建议”选项卡时，数据才会被提取出来并看到它下面的数据。有人能告诉我出了什么问题吗？此问题适用于除仪表板选项卡以外的所有选项卡

工作正常时的操作：

在仪表板选项卡上，然后搜索新HCP

再次重定向到“仪表板”选项卡，并正确呈现数据

工作错误时的操作：

在“建议”选项卡（或仪表板以外的任何选项卡）上，然后搜索新的HCP

重定向到仪表板选项卡，并为仪表板正确呈现数据

在切换到“建议”选项卡时，将获取数据，但不会显示任何内容。然而，在转到其他选项卡，然后返回到“建议”选项卡时，数据会被提取，甚至正确呈现

只是一点背景信息，我有一个搜索组件，它是所有这些组件的父组件。我在它里面维护一个状态来处理选项卡的点击，并根据点击哪个选项卡来渲染该组件。此外，我还使用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>
                   </>

类建议扩展组件{
状态={
加载：false，
页码：2，
记录面板数据：[]，
时间段：“月”，
主演：0，
下线原因：“”，
searchName:this.props.searchName，
错误：this.props.error
}
componentDidMount（）{
log（'单击建议！'）；
this.setState（{loading:true}）；
让page_id=this.state.page_id；
让npi_id=parseInt（this.state.searchName[0]。替换（/（^.*\[|\].$）/g'，）；
post（“/test json”{
页码id：页码id，
npi_id:npi_id，
时间段：“月”
})
。然后（（res）=>{
const dataRequest=res.data；
console.log（'在建议组件内接收数据'，res.data）；
setState（{rec_panel_data:res.data[212]，load:false}）；
console.log（'在建议组件中加载数据后的状态：'，this.State）；
}，（错误）=>{
console.log（错误）；
});
}
返回(
{
this.state.rec_panel_data.length==0 | | this.state.load==true？
:
this.state.error==真？
此HCP的数据当前不可用
:
this.state.loading==真？
:
} 

我没有包含父搜索组件的代码，但正如我所提到的，它根据单击将选项卡状态更改为“建议”、“仪表板”等，然后这些组件被呈现。例如：

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

{
this.state.tab_按钮_单击==='建议'&&
}

---

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

最终还是一个很小的问题

为解决问题的最上面的div inside建议添加了活动类

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

如果有人对代码有任何疑问或问题不清楚，请告诉我。请创建一个类似于代码的SandBox我不知道如何创建，因为我以前没有使用过SandBox，而且我正在使用axios获取数据：（您可以将小的虚拟数据放入变量或json文件中。我添加了一个编辑，其中显示了打开codesandbox时的错误。