reactjs - 从 React 组件离开或关闭页面时从数据库中删除项目
问题描述
我有一个 React 组件,它是 React/Apollo Booking 应用程序的一部分。我将所有预订存储在一个 SQL 数据库中,该数据库与 React-Apollo 连接。在客户开始付款过程之前,数据库会发送临时预订以“保留”某些时间并限制其他客户同时预订。如果客户刷新/离开页面,我想从 Apollo DB 中删除这些临时预订。
工作流程如下:
- 选择预订时间(在这里我将预订添加到数据库)。
- 列出客户预订以供审核并添加额外功能。
- 付款流程
所以我遇到的问题是,如果客户在第 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)
}
解决方案
您作为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)
}
}
推荐阅读
- api - 如何在您的烧瓶网站中显示 Stackoverflow 问题
- javascript - 如何按国际象棋顺序将两个数组合并为一个
- sql-server - 将 SQL Server 数据库从一台服务器复制到另一台服务器时出错
- ios - 如何为 ImagePicker 制作圆形编辑区域而不是矩形?
- ios - 如何将当前登录用户的数据保存到 Firebase?
- sql - 如何查看列是否有值
- openmp - 将 OpenMP 编译为 WebAssembly
- dc.js - barChart svg 渐变填充
- bash - 在 bash 脚本问题中将命令设置为变量
- javascript - 构建完成reactjs后如何编辑.env文件