第二次点击导出图形时，获取属性“正在导出”未定义

问题描述

当我第二次尝试将图形导出为png时遇到问题。第一次一切都很好，但是在第二次单击时，我在控制台Cannot read property 'exporting' of undefined中收到此错误。我正在使用React，我的代码如下所示：

const [exportGraph,setExportGraph] = React.useState<JSX.Element | null>(null);

const chartCallback = (chart: Highcharts.Chart) => {
setExportGraph(
  <React.Fragment>
    <ChartAction
      onClick={() => {
        chart.exportChart({},{});
      }}
      title={t('exportGraPHPNG')}
      iconName={EXPORT_ICON}
    />
    <ChartAction
      onClick={() => {
        chart.downloadCSV();
      }}
      title={t('exportGraphCSV')}
      iconName={EXPORT_ICON}
    />
  </React.Fragment>
 );
};

return (
   ...
   <div>{exportGraph}</div>
   ...
);

在图表组件中，我已经定义了

const handleChartCallback = (chart: Highcharts.Chart) => {
    enableScrollWithMouseWheel(chart);
    chartCallback && chartCallback(chart);
};

return (
   <HighchartsReact
      constructorType={'chart'}
      highcharts={Highcharts}
      options={options}
      callback={handleChartCallback}
   />
)

请注意，downloadCSV在多次导出中效果很好，但仅在导出png之前有效。之后，该图表似乎以某种方式从dom中消失了。我怎样才能解决这个问题？预先感谢！

解决方法

根据注释-使用useRef创建图表引用以获取chart对象作为这种情况的解决方案。

演示：https://stackblitz.com/edit/react-jfwcnc?file=index.js