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

Question

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

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

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

正常工作时的操作：

在仪表板选项卡上，然后搜索新的 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>
                   </>

我没有包含父搜索组件的代码，但正如我提到的，它会根据点击将选项卡状态更改为 'recommendations'、'dashboard' 等，然后这些组件会被渲染。例如像这样：

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

如果我遗漏了有关组件生命周期的内容，请告诉我。

Answer 1

终于出了个小问题！

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

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

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

Component not getting rendered when I trigger an external event

html

javascript

components

reactjs

axios