Почему ReactDOM.flushSync не работает в Chrome после открытия диалогового окна печати

Question

У меня есть компонент, который вызывает следующий метод, передавая значение true внутри window.onbeforeprint, а затем снова вызывает передачу, передавая значение false внутри window.onafterprint. Метод, который он вызывает,

    updatePrint(print) {
      this.setState({print});
      ReactDOM.flushSync(() => {
        this.forceUpdate();
      });
    }

Вызывается в конструкторе компонента:

    constructor(props) {
      super(props);
      this.printMatcher = window.matchMedia && window.matchMedia('print');
      window.onbeforeprint = () => {
        this.updatePrint(true);
      };
      window.onafterprint = () => {
        this.updatePrint(false);
      };
      this.state = {print: this.printMatcher && !!this.printMatcher.matches};
    }

В Chrome я получаю ошибку Invariant Violation: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering., и вы больше не можете взаимодействовать с компонентами на странице, пока страница не будет перезагружена. В Firefox и Safari он работает правильно (пользователь может взаимодействовать с компонентами после печати страницы, а ошибки нет).

Что я должен сделать, чтобы убедиться, что состояние обновляется, когда пользователь хочет напечатать страницу, и должно ли оно оставаться отзывчивым, когда диалоговое окно печати закрыто?

Answer 1

Фактической проблемы не было в этом коде, компонент также назывался updatePrint в обработчике событий, и в Chrome он вызывал обработчик событий более одного раза. Второй вызов вызвал ошибку.