react中使用antd的Toast組件,路由跳轉時報錯

1、原始代碼以下:

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,提交成功後,先給出提示,而後跳轉到其餘頁面。node

2、此時,跳轉能夠成功,可是會報如下錯誤:

clipboard.png

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.瀏覽器

3、緣由猜想

Toas組件是整個頁面組件的子組件,由於路由跳轉,頁面已經卸載,可是Toast組件的onClose方法致使子組件尚未卸載。多是Toast組件存在bug(解決該問題時在StackOverflow發現,使用fontAwsome的icon組件也會致使出現同樣的問題)antd

4、解決方法

不使用onClose方法,而是使用定時器。ide

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);

解決方法二:
不使用this.props.history去跳轉,而是使用window.location直接改變瀏覽器的地址:this

window.location.href='/someurl'+this.state.parameter;
相關文章
相關標籤/搜索