Dynamic 更改数据后恢复动态不渲染

我需要你的帮助。我试图根据您单击的选项卡显示不同的字符。请看这里：

[图一][1] [1]: https://i.stack.imgur.com/In82n.png

正如您所看到的，它最初是加载的。但当我单击该选项卡时，它不再显示任何图表：

[图二][2] [2]: https://i.stack.imgur.com/9Xj3K.png

即使我回到数据1，图形现在也消失了：

[附表1][3] [3]: https://i.stack.imgur.com/hCnHu.png

即使我回到数据1，图形现在也消失了： 我与react开发者核实，chartData正在正确更改，现在已经没有想法了。我希望有人能帮助我

以下是沙盒链接：

和代码：

const buildChartHtml = () => {
    let elements = [];
    if (activeType === 0) {
      elements.push(<XAxis dataKey="day" type="number" tickCount={11} label={CHART_INFO[activeType].xAxis_label} />);
      elements.push(<YAxis type="number" label={CHART_INFO[activeType].yAxis_label} />);
      elements.push(<Line data={chartData} dataKey={CHART_INFO[activeType].dataKey} stroke="#FF3333" dot={false} strokeWidth={2} legendType="square" />);
      elements.push(<Line type="linear" data={testline} dataKey="y" stroke="#0000ce" dot={false} strokeWidth={2} legendType="square" />);
    } else if (activeType === 1) {
      elements.push(<XAxis dataKey="day" type="number" tickCount={11} label={CHART_INFO[activeType].xAxis_label} />);
      elements.push(<YAxis type="number" label={CHART_INFO[activeType].yAxis_label} />);
      elements.push(<Line data={chartData} dataKey={CHART_INFO[activeType].dataKey} stroke="#FF3333" dot={false} strokeWidth={2} legendType="square" />);
      elements.push(<ReferenceLine y="1000" label={{ position: "center", value: "Max Budget" }} />);
    }
    setChartHTML(elements);
  };

  // render onMount
  useEffect(() => {
    //check which type of process is run
    setChartData(buildChartData());
    buildChartHtml();
  }, []);

  // change chartData when activeType is changed
  useEffect(() => {
    //check which type of process is run
    if (activeType === 0 && chartData.length > 1) {
      setChartData(data1);
      buildChartHtml();
    }
    if (activeType === 1) {
      setChartData(data2);
      buildChartHtml();
    }
    // console.log("activeType: " + activ ta))
  }, [activeType]);

constbuildChartHTML=（）=>{
让元素=[]；
如果（activeType==0）{
元素push（）；
元素push（）；
元素push（）；
元素push（）；
}else if（activeType==1）{
元素push（）；
元素push（）；
元素push（）；
元素push（）；
}
setChartHTML（元素）；
};
//在山上渲染
useffect（（）=>{
//检查正在运行的进程类型
setChartData（buildChartData（））；
buildChartHtml（）；
}, []);
//更改activeType时更改图表数据
useffect（（）=>{
//检查正在运行的进程类型
如果（activeType==0&&chartData.length>1）{
setChartData（数据1）；
buildChartHtml（）；
}
如果（activeType==1）{
setChartData（数据2）；
buildChartHtml（）；
}
//日志（“activeType:+activ ta））
}，[activeType]）；

JSX:

返回(
{CHART_INFO.map（（项目，索引）=>(
[setActiveType（item.id），setActiveIndex（index）]}/>
))}
{chartHTML}
);>

    return (
    <div>
      <AntTabs value={value} onChange={handleChangeTabs}>
        {CHART_INFO.map((item, index) => (
          <Tab label={item.name} onClick={() => [setActiveType(item.id), setActiveIndex(index)]} />
        ))}
      </AntTabs>
      <LineChart key={CHART_INFO[activeType].dataKey} width={500} height={300} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
        <Legend verticalAlign="top" />
        <Tooltip />
        {chartHTML}
      </LineChart>
    </div>
  );>