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

Question

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

工作流程如下:

1. 选择预订时间(这里我将预订添加到数据库)。
2. 列出客户预订以供审核并添加额外功能。
3. 付款流程

所以我遇到的问题是，如果客户在第 2 步离开，那么我想从数据库中删除这些预订。这可以像下面的代码一样完成吗？或者我是否需要在这些临时预订上放置一个计时器，并在不满足某些条件的情况下在一定时间后从数据库中删除？

我已经阅读了有关该主题的多个主题并尝试了建议的解决方案。我猜测对数据库的调用是异步的，或者涉及 Prop 的事实是问题所在，这就是它不起作用的原因。

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 事件回调的函数未绑定(bind)到 this。使用箭头函数代替:

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

要在卸载时正确删除监听器，您需要将处理程序绑定(bind)到组件实例，以便可以在 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)
    }
}