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,提交成功后,先给出提示,然后跳转到其他页面。

二、此时,跳转可以成功,但是会报以下错误:

《react中使用antd的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);

解决方法二:
不使用this.props.history去跳转,而是使用window.location直接改变浏览器的地址:

window.location.href='/someurl'+this.state.parameter;
    原文作者:SHIYIBODEC
    原文地址: https://segmentfault.com/a/1190000018612283
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞