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;
相关文章
相关标签/搜索