Javascript 通过新道具时，部件未重新安装

我想根据医生的名字获取数据。在第一次单击Sales Overview选项卡时，组件被装载，数据被顺利获取，我看到所有图表都得到更新。但是，当我使用“搜索”按钮获取新医生的数据，然后单击“销售概述”选项卡时，我没有看到任何获取操作，而是继续查看以前医生的数据

以下是搜索字段和选项卡的屏幕截图：

我将医生的姓名从父搜索组件传递到SalesOverview1子组件，如下所示：

  {
                            this.state.tab_button_clicked === 'sales_overview' && 
                            <SalesOverview1  
                                searchName = {this.state.searchName}
                            />
                            }

{
单击this.state.tab_按钮=====“销售概述”&&
}

在SalesOverview 1中，我获取componentDidMount中的数据，然后更新各种图表。我还根据从父搜索组件接收到的道具设置它的状态。如果从搜索组件到child SalesOverview1 comp没有要传递的内容，我将保留一个默认值[“[101]Anna”]

  class SalesOverview1 extends Component {
    state = {
    page_id: 4,
    hcp_id: 101,
    sales_overview_data: [],
    searchName: this.props.searchName.length === 0 ? ["[101]Anna"] : this.props.searchName
}


 componentDidMount() {
    console.log('Clicked on sales Overview!');
    let page_id = this.state.page_id;
    let hcp_id = parseInt(this.state.searchName[0].replace(/(^.*\[|\].*$)/g, ''));
    console.log('state: ', this.state);
    axios.post('/test-json', {
        page_id: page_id,
        hcp_id: hcp_id,
    })
        .then((res) => {
            const dataRequest = res.data;
            this.setState({ sales_overview_data: res.data });
        }, (error) => {
            console.log(error);
        });
}

  render() {
       console.log('props data inside sales overview comp: ', this.props)
    console.log('state inside sales overview comp: ', this.state)

    return (
        <>
          <div class='row'>
                                                {
                                                    this.state.sales_overview_data.length !== 0 &&
                                                    <ChartBox
                                                        data={this.state.sales_overview_data[401]}
                                                    />
                                                }
            </div>
        </>

class SalesOverview 1扩展组件{
状态={
页码：4，
hcp_id:101，
销售概述数据：[]，
searchName:this.props.searchName.length==0？[“[101]Anna”]：this.props.searchName
}
componentDidMount（）{
log（'Clicked on sales Overview！'）；
让page_id=this.state.page_id；
让hcp_id=parseInt（this.state.searchName[0]。替换（/（^.*\[|\].$）/g'，）；
console.log（'state:'，this.state）；
post（“/test json”{
页码id：页码id，
hcp_id:hcp_id，
})
。然后（（res）=>{
const dataRequest=res.data；
this.setState（{sales\u overview\u data:res.data}）；
}，（错误）=>{
console.log（错误）；
});
}
render（）{
console.log（'sales overview comp:中的道具数据'，this.props）
console.log（'sales overview comp:'中的状态，this.state）
返回(
{
this.state.sales\u overview\u data.length！==0&&
}

基本上，我希望在收到这个组件中的新道具后运行api请求。我希望重新装载，以便发出api请求

---

在api获取中，我使用了一个替换函数来提取方括号之间的数字，然后用于获取数据：

在向子组件传递道具的同时添加一个键完成了这项任务

  {
                        this.state.tab_button_clicked === 'sales_overview' && 
                        <SalesOverview1  
                            key={this.state.finalsearchName}
                            searchName = {this.state.searchName}
                        />
                        }

{
单击this.state.tab_按钮=====“销售概述”&&
}

---

我了解到，如果道具已更改，添加密钥会自动重新装载子组件。

如果有人对代码有任何疑问，请告诉我。