从 React 组件离开或关闭页面时从数据库中删除项目

Question

我有一个 React 组件，它是 React/Apollo Booking 应用程序的一部分。我将所有预订存储在与 React-Apollo 连接的 SQL 数据库中。在客户开始付款过程之前，数据库会发送临时预订以“保留”某些时间并限制其他客户同时预订。如果客户刷新/离开页面，我想从 Apollo DB 中删除这些临时预订。

工作流程如下：

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)
  }

Answer 1

您作为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)
    }
}