Получение свойства "экспорт", неопределенного при экспорте графика по второму щелчку

#reactjs #highcharts #react-highcharts

#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 amp;amp; chartCallback(chart);
};

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

Обратите внимание, что downloadCSV это отлично работает при многократном экспорте, но только до тех пор, пока я не экспортирую png. После этого кажется, что диаграмма каким-то образом исчезает из dom. Как я могу это исправить? Заранее спасибо!

1. Не могли бы вы воспроизвести свой случай в каком-нибудь онлайн-редакторе, над которым я мог бы поработать?

2. Здесь codesandbox.io/s/priceless-colden-cqwfl?file=/src/App.js . Извините, я не смог воспроизвести его лучше, но вы можете увидеть, что если вы дважды нажмете кнопку PNG, появится эта ошибка.

3. Ваш пример выглядит слишком сложным, чтобы выяснить, почему возникает ошибка. Почему бы вам просто не создать ссылку на диаграмму и использовать ее для экспорта диаграммы в пользовательском событии кнопки? stackblitz.com/edit/react-jfwcnc?file=index.js

4. Спасибо за вашу помощь. Я решил свою проблему с useRef . Пожалуйста, напишите ответ, чтобы я мог его принять!

Ответ №1:

Согласно комментариям — используйте useRef для создания ссылки на диаграмму, чтобы получить chart объект в качестве решения для этого случая.

Демонстрация:https://stackblitz.com/edit/react-jfwcnc?file=index.js