が反応 - ウィンドウのbeforeunloadイベントは発生しません

Question

I次のコードがあります（ユーザーがページ中旬の貿易を離れた場合、すなわちFirebaseにいくつかの状態を復元）

class TradeItemBox extends React.Component { 
    constructor(props) { 
    super(props) 
    console.log('tradeitembox', props) 

    this.removeItemsFromTrade = this.removeItemsFromTrade.bind(this) 
    this.onUnloadCleanup = this.onUnloadCleanup.bind(this) 
    } 


    renderItems() { 
    const {trade} = this.props 
    if (trade.items.length === 0) { 
     return null 
    } 
    return trade.items.map((item, key) => { 
     return <TradeItem key={key} item={item}/> 
    }) 
    } 

    onUnloadCleanup() { 
    alert('Hello!') 
    console.log('unloading') 
    if(this.props.trade.items.length > 0) { 
     this.removeItemsFromTrade() 
    } 
    } 

    componentDidMount() { 
    console.log('did mount') 
    window.addEventListener('beforeunload', this.onUnloadCleanup) 
    } 

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

    removeItemsFromTrade() { 
    const {firebase, trade, removeItemFromTrade} = this.props 
    trade.items.forEach((item) => { 
     item.isTemporarilyInUse = false 
     item.currentUser = null 
     firebase.set(`/inventory/${item.id}`, item) 
     removeItemFromTrade(item.id) 
    }) 
    } 


    render() { 
    return (
     <Col xs={12} md={5}> 
      <div className="items-container"> 
      {this.renderItems()} 
      </div> 
      <Button 
      onClick={this.removeItemsFromTrade} 
      disabled={!this.props.isLoggedIn} 
      color="success" 
      > 
      {'<= Clear trade'} 
      </Button> 
     </Col> 
    ) 
    } 
} 

const firebaseWrappedComponent = firebase()(TradeItemBox) 

const mapStateToProps = ({trade, user}) => ({ 
    isLoggedIn: user.isLoggedIn, 
    trade 
}) 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
    removeItemFromTrade 
    }, dispatch) 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(firebaseWrappedComponent) 

私が行う必要があるいくつかのクリーンアップがありますがですから、私はSOを読んで、イベントリスナーをcomponentDidMountのwindow.beforeunloadに追加し、componentWillMountでイベントリスナーを削除する必要があることを知りました。ただし、イベントは発生せず、アラートは表示されません。リフレッシュやタブの終了は表示されません。なぜこれが起こらないのかについてのヒント？

Answer 1

このイベントに割り当てたコールバックから文字列を返す必要があります。

onUnloadCleanup() { 
     alert('Hello!') 
     console.log('unloading') 
     if(this.props.trade.items.length > 0) { 
      this.removeItemsFromTrade() 
     } 
     return "unloading"; 
     }