Удаление элементов из базы данных при выходе или закрытии страницы из компонента React - PullRequest
Новая
       30

Удаление элементов из базы данных при выходе или закрытии страницы из компонента React

1 голос
/ 10 марта 2020

У меня есть компонент React, который является частью приложения React / Apollo Booking. Я храню все заказы в базе данных SQL, которая подключена к React-Apollo между ними. Перед тем, как клиент начнет процесс оплаты, в базу данных отправляются временные бронирования, чтобы «удерживать» определенное время и удерживать других клиентов от бронирования в то же время. И если клиент обновляет / покидает страницу, я хочу удалить эти временные заказы из БД Apollo.

Рабочий процесс выглядит следующим образом:

  1. Выберите время для бронирования (и здесь я добавляю бронирование в БД).
  2. Список заказов клиентов для просмотра и добавления дополнительных функций.
  3. Процесс оплаты

Итак, у меня проблема в том, что если клиент уходит с шага 2, я хочу удалить это бронирование из БД. Может ли это быть сделано с помощью приведенного ниже кода или мне нужно поставить как таймер на эти временные заказы и удалить через некоторое время из БД, если определенные критерии не выполнены?

Я прочитал несколько тем на эту тему и попробовал предложенные решения. Я предполагаю, что вызов БД является асинхронным, или проблема заключается в том, что реквизиты задействованы, и поэтому он не работает. 

componentDidMount() {
    window.addEventListener('beforeunload', function () {
      this.props.tempBookings.forEach(booking => {
        removeBookingFromDB(booking.id)
      })
    }, false);
  }

  componentWillUnmount() {
    window.addEventListener('beforeunload', function () {
      this.props.tempBookings.forEach(booking => {
        removeBookingFromDB(booking.id)
      })
    }, false)
  }

1 Ответ

1 голос
/ 10 марта 2020

Функция, предоставляемая вами в качестве обратного вызова для события beforeunload, не привязана к this. Вместо этого используйте функцию стрелки: 

window.addEventListener('beforeunload', () => {
    this.props.tempBookings.forEach(booking => {
        removeBookingFromDB(booking.id)
    })
}, false);

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

class MyComponent extends React.Component {

    // must be an arrow function
    removeBookings = () => {
        this.props.tempBookings.forEach(booking => {
            removeBookingFromDB(booking.id)
        })
    }

    componentDidMount() {
        window.addEventListener('beforeunload', this.removeBookings, false);
    }

    componentWillUnmount() {
        window.removeEventListener('beforeunload', this.removeBookings, false)
    }
}
...