Событие выгрузки окна реакции не срабатывает - PullRequest
Новая
       13

Событие выгрузки окна реакции не срабатывает

0 голосов
/ 28 марта 2019

Мне нужно использовать navigator.sendBeacon() при выгрузке окна, чтобы мой сервер знал, что клиент закрыл свое окно. Я искал везде, и это просто не работает для меня.

Для справки, решение в этом посте тоже не сработало.

У меня есть компонент App, который оборачивает весь мой проект. Я пытаюсь установить событие unload для componentDidMount() метода жизненного цикла, и оно просто не сработает. 

componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
}

componentWillUnmount() {
  window.addEventListener("beforeunload", this.unload);
}

unload(e) {
  e.preventDefault();
  e.returnValue = 'test';
  navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
  return 'test';
}

Я ожидаю, что сервер получит вызов AJAX, и окно предложит пользователю выполнить «тест» до закрытия окна. На самом деле окно просто закрывается как обычно.

ПРИМЕЧАНИЕ: операторы return 'test' & e.returnValue = '' предназначены исключительно для тестирования. Меня интересует только запрос AJAX.

Любая помощь будет высоко ценится.

Ответы [ 3 ]

1 голос
/ 28 марта 2019

Вы должны связать это с методом выгрузки или преобразовать его в функцию стрелки.

Binging way 

constructor() {
    super();
    this.state = {
      //stuff
    };
    this.unload.bind(this);
  }

  componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
}

componentWillUnmount() {
  window.removeEventListener("beforeunload", this.unload);
}

unload(e) {
  navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
}

Способ работы со стрелками: 

  constructor() {
    super();
    this.state = {
      //stuff
    };
  }

  componentDidMount() {
  window.addEventListener("beforeunload", this.unload);
  }

  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.unload);
  }

  unload = (e) => {
    navigator.sendBeacon(`http://localhost:8080/window-closed/${this.props.username}`);
  }

Не забудьте удалить список событий на componentWillUnmount (вы добавляете его снова).

0 голосов
/ 28 марта 2019

Вы пробовали объявить функцию загрузки как функцию жирной стрелки?Также объявите это перед componentDidMount.(для лучшей читаемости), прежде чем передать его в качестве ссылки.

Также вы пытались подключить слушателя в конструктор?И сделайте surw, чтобы связать вашу функцию в конструкторе.Для справки

Также уничтожьте слушателя в componentWillUnmount, вместо того, чтобы добавить его.(бесполезно) использовать ссылку на слушателя, чтобы уничтожить.Который вы создадите в конструкторе.

Удачи

0 голосов
/ 28 марта 2019

Я не уверен, почему beforeunload не работает, но в качестве обходного пути вы можете рассмотреть возможность использования события hashchange. 

componentDidMount() {
    window.addEventListener("hashchange", this.doSomething, false);
}

componentWillUnmount() {
    window.removeEventListener("hashchange", this.doSomething, false);
}
...