时间戳

首页 > 解决方案 > 在第二次单击时导出图形时获取属性“导出”未定义

reactjs - 在第二次单击时导出图形时获取属性“导出”未定义

问题描述

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

标签： reactjshighchartsreact-highcharts

解决方案

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

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

推荐阅读