react中使用antd的Toast元件,路由跳轉時報錯
一、原始程式碼如下:
Toast.success('繫結成功',2,()=>{ if(this.state.fromFaultReport === false) this.props.history.goBack(); else { console.log('跳轉到其他頁面'); let url = '/someurl'; that.props.history.push(url) } });
Toast元件是antd-mobile的Toast,提交成功後,先給出提示,然後跳轉到其他頁面。
二、此時,跳轉可以成功,但是會報以下錯誤:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
三、原因猜測
Toas元件是整個頁面元件的子元件,因為路由跳轉,頁面已經解除安裝,但是Toast元件的onClose方法導致子元件還沒有解除安裝。可能是Toast元件存在bug(解決該問題時在StackOverflow發現,使用fontAwsome的icon元件也會導致出現一樣的問題)
四、解決方法
不使用onClose方法,而是使用定時器。
Toast.success('繫結成功',0); setTimeout(()=>{ Toast.hide(); if(this.state.fromFaultReport === false) this.props.history.goBack(); else { console.log('跳轉到其他頁面'); let url = '/someurl'; that.props.history.push(url) } },2000);