点击Sales Overview标签页后Axios请求数据已获取但组件未重新挂载导致图表不显示问题

你的问题本质是两个核心原因导致的：Bootstrap标签页结构不规范，使得组件渲染后无法被正确显示；以及异步数据加载完成后，组件渲染时机与标签页激活状态未同步。下面一步步拆解修复方案：

1. 先修复Bootstrap标签页的核心结构 #

你当前的tab-content区域没有按照Bootstrap的要求组织内容——每个标签页的组件必须包裹在对应id的tab-pane容器中，并且和标签链接的href一一对应。这是导致首次点击后内容不显示的最关键问题。

修改父组件的tab-content部分：

<div className="tab-content">
  {/* Dashboard标签页容器，默认激活 */}
  <div id="tablet-1" className="tab-pane active">
    {this.state.receivedData.length !== 0 && <Dashboard data={this.state.receivedData} />}
  </div>

  {/* Engage With HCP标签页容器 */}
  <div id="tablet-2" className="tab-pane">
    <EngageWithHCP />
  </div>

  {/* Sales Overview标签页容器 */}
  <div id="tablet-3" className="tab-pane">
    {this.state.sales_overview_data.length !== 0 && <SalesOverview1 data={this.state.sales_overview_data} />}
  </div>

  {/* Promotional Activity标签页容器 */}
  <div id="tablet-4" className="tab-pane">
    <PromotionalActivity1 />
  </div>

  {/* Patient Analysis标签页容器 */}
  <div id="tablet-5" className="tab-pane">
    <PatientAnalysis1 />
  </div>
</div>

注意：React中要使用className代替原生HTML的class，你原代码里的class需要全部替换，否则会触发警告。

2. 确保子组件响应数据更新 #

即使数据加载完成并渲染了组件，你的图表可能不会自动更新。需要在SalesOverview1组件中监听data props的变化，触发图表的重新渲染：

如果SalesOverview1是类组件：

class SalesOverview1 extends Component {
  componentDidUpdate(prevProps) {
    // 当props中的data发生变化时，重新初始化图表
    if (prevProps.data !== this.props.data) {
      // 这里调用你的图表更新逻辑，比如重新渲染ChartBox
      console.log("数据已更新，刷新图表");
    }
  }

  render() {
    // 增加空值判断，避免data[401]不存在时报错
    return (
      <div className='row'>
        {this.props.data[401] && <ChartBox data={this.props.data[401]} />}
      </div>
    );
  }
}

如果是函数组件：

import { useEffect } from 'react';

const SalesOverview1 = (props) => {
  useEffect(() => {
    // 监听data变化，更新图表
    if (props.data) {
      console.log("数据已更新，刷新图表");
      // 执行图表初始化/更新逻辑
    }
  }, [props.data]); // 依赖数组：只有data变化时才触发

  return (
    <div className='row'>
      {props.data[401] && <ChartBox data={props.data[401]} />}
    </div>
  );
};

3. 优化请求逻辑（可选） #

为了避免重复发起请求，可以在点击标签时先判断数据是否已存在：

salesOverviewClicked = () => {
  console.log('Clicked on sales Overview!');
  // 如果已有数据，直接返回，不再请求
  if (this.state.sales_overview_data.length > 0) return;

  const { page_id_sales_overview, hcp_id } = this.state;
  axios.post('/test-json', { page_id: page_id_sales_overview, hcp_id })
    .then((res) => {
      // setState不需要展开整个state，React会自动合并
      this.setState({ sales_overview_data: res.data });
    })
    .catch((error) => {
      console.log(error);
    });
}

额外注意点 #

• 不要用数组作为组件的key（你原代码里的key = {this.state.sales_overview_data}），数组引用每次更新都会变化，会导致不必要的组件重新渲染。可以用固定值如key="sales-overview"，或数据中的唯一标识（如果存在）。
• setState是异步的，你原代码中console.log('State after loading...')打印的是旧状态，如果要查看更新后的状态，需要在setState的回调中打印：

  this.setState({ sales_overview_data: res.data }, () => {
    console.log('State after loading data: ', this.state);
  });
  

内容的提问来源于stack exchange，提问作者ShridharK