如何防止在React組件中卸載？

Question

我試圖在我的應用中實現一項功能，當用戶嘗試從未提交的表單導航時，他們會得到一個確認，詢問他們是否確定要在保存更改前離開。

的componentWillUnmount方法似乎是這樣，因爲它會火爲所有用戶可以拋棄形式的各種方法完美的候選人（改變，導致它消失父組件狀態，導航到不同的路線，等...）。但是...當確認返回錯誤時，我無法阻止卸載。

關於如何實現這一點的任何建議？

Answer 1

這最好通過react-router：setRouteLeaveHook來處理。

componentWillMount() { 
    this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this)); 
} 

routerWillLeave(nextLocation) { 
    return false;   
} 

當組件卸載，註銷假鉤：

componentWillUnmount() { 
    this.unregisterLeaveHook(); 
} 

Answer 2

我不會推薦在componentWillUnmount中這樣做。我通常希望在商店中做到這一點（如果您使用的是流量架構）。通常需要跟蹤所有數據的商店。 componentWillUnmount函數是你想要卸載存儲監聽器的。