Отправка запроса на сервер при закрытии страницы. Почему?

Question

[Pavel_Chalov]

async function handleTabClose() {
    console.log(data)
    await fetch('/save', {
      method: 'POST',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'token': localStorage.getItem("token"),
      },
      body: JSON.stringify({tasks: data.tasks})
    })
  };

 useEffect(() => {
    window.addEventListener("beforeunload", () => handleTabClose());

    return () => {
      window.removeEventListener("beforeunload", () => handleTabClose());
    };
  }, []);

data - стейт для данных, пришедших с бекенда.

Когда функция handleTabClose вызывается при нажатии на кнопку, на сервер приходит не пустой массив, но когда она вызывается при закрытии или перезагрузке страницы, то приходит пустой массив.

Comments

[Алексей Уколов]

Корректно навешивать обработчик так:

useEffect(() => {
    window.addEventListener("beforeunload", handleTabClose);

    return () => {
      window.removeEventListener("beforeunload", handleTabClose);
    };
  }, []);

Иначе removeEventListener корректно работать не будет. Впрочем, в данном случае можно вообще ничего не чистить
— страница всё равно полностью закрывается.
Это не связано, наверное, напрямую с проблемой, просто замечание.

[WbICHA]

Впрочем, в данном случае можно вообще ничего не чистить
— страница всё равно полностью закрывается.

Ага, особенно в стрикт моде или при анмоунте компонента.)

[Алексей Уколов]

WbICHA, да, что-то я плохо подумал.