目前，我有这个搜索选项卡和这些中间选项卡，如图所示。
[！[在此输入图像描述][1]][1]
有一个你可能看不到的"仪表板"选项卡，但它是图片中最左边的选项卡，搜索窗口覆盖了它。当我从下拉列表中单击搜索选项时，我重定向到仪表板选项卡，并首先显示仪表板选项卡的数据。当我在搜索时已经在"仪表板"选项卡上时，应用程序会获取数据并正确地重新加载自己，并且会为"仪表板》选项卡更新新数据。但是，如果我在"建议"选项卡上并单击搜索，我会被重定向到"仪表板(Dashboard("选项卡，数据会被提取，但当我切换到"建议"(Recommendations(选项卡时，即使为"建议"，它在"建议"选项卡下显示了一个空白区域。只有当我转到另一个选项卡，然后返回"建议"时，才能提取数据并查看其下的数据。有人能告诉我出了什么问题吗？此问题适用于除仪表板选项卡之外的所有选项卡。
工作正常时的操作：
- 在仪表板选项卡上，然后搜索新的HCP
- 再次重定向到"仪表板"选项卡，数据将正确呈现
工作错误时的操作：
- 在"建议"选项卡(或除Dashboard以外的任何选项卡(上，然后搜索新的HCP
- 获取重定向到"仪表板"选项卡的信息，并为仪表板正确呈现数据
- 切换到"建议"选项卡时，会获取数据，但不会显示任何内容。然而，在转到其他选项卡，然后返回"建议"选项卡时，数据会被提取，甚至会被正确呈现
只有一点背景信息，我有一个搜索组件，它是所有这些组件的父组件。我在它内部维护一个处理选项卡单击的状态，并根据单击的选项卡来渲染该组件。此外，我正在使用componentDidMount获取这些子组件内部的所有数据，如Dashboard、Recommendations、Sales Overview等。
以下是建议组件的代码：
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}
/>
}
如果我在组件生命周期方面遗漏了什么，请告诉我。
最终是一个非常小的问题！
在Recommendations中为最上面的div添加了活动类，从而解决了问题。
<div role="tabpanel" id="tablet-6" class="tab-pane active" >