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

Question

我有一个 React 组件，它是 React/Apollo 预订应用程序的一部分。我将所有预订存储在一个 SQL 数据库中，该数据库与 React-Apollo 相连。在客户开始付款流程之前，数据库会在特定时间向 "hold" 发送临时预订，并限制其他客户同时预订。如果客户 refreshes/leave 我想从 Apollo DB 中删除那些临时预订的页面。

工作流程如下：

Select 次预订（这里我将预订添加到数据库）。
列出客户预订以供审核并添加额外功能。
付款流程

所以我遇到的问题是，如果客户在第 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)
    }
}

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

Remove items from the database on leaving or closing the page from a React Component

reactjs

react-router

react-apollo

react-lifecycle