第二次单击导出图形时未定义属性 'exporting'

Question

我尝试在第二次单击时将图表导出为 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 中消失了。我怎样才能解决这个问题？提前致谢！

Answer 1

根据评论 - 使用 useRef 创建图表参考以获得 chart 对象作为这种情况的解决方案。

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

第二次单击导出图形时未定义属性 'exporting'

Getting property 'exporting' undefined when exporting graph on second click

reactjs

highcharts

react-highcharts

第二次单击导出图形时未定义 属性 'exporting'

Getting property 'exporting' undefined when exporting graph on second click

reactjs

highcharts

react-highcharts

第二次单击导出图形时未定义属性 'exporting'